您的位置：首页 > Web前端 > Vue.js

vue学习十六---component组件的三种创建方式

2020-01-12 20:58 615 查看

component组件

以下写了三种组件创建方式，个人推荐使用第三种，同时配了三个对应的demo

1. 使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
template: '<h1>登录</h1>'
});
Vue.component('login', login);

2. 直接使用 Vue.component 方法：

Vue.component('register', {
template: '<h1>注册</h1>'
});

3. 将模板字符串，定义到script标签种：

<script id="tmpl" type="x-template">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</script>

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
template: '#tmpl'
});

注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

例子一

<div id="app">

<!-- 如果要使用组件，直接把组件的名称 ，以HTML标签的形式 引入到页面中 ，即可  注意：标签不能使用驼峰命名，需要加'-'！ -->
<!-- 如果是非驼峰命名，则和组件名称一样即可！ -->
<my-com1></my-com1>
</div>
<script>

/*  // 1.1 使用vue。extend 来创建全局组件
var com1 = Vue.extend({
template: '<h3>这是使用Vue.extend 创建的组件</h3>'  // 指向组件要展示的HTML结构
})

// 1.2 使用Vue.component('组件的名称'，创建的组件模板对象)
Vue.component('myCom1',com1)
*/

// 把前面两部分合为一部分
Vue.component('myCom1',Vue.extend({
template: '<h3>这是使用Vue.extend 创建的组件</h3>'  // 指向组件要展示的HTML结构
}))

var vm=new Vue({
el:'#app',
data:{},
methods:{}

例子二

<body>
<div id="app">
<mycom2></mycom2>
</div>
<script>
// 只能有一个根元素
Vue.component('mycom2',{
template:'<div><h3>这是直接使用vue.component 创建组件</h3><span>第二个标签</span></div>'
})
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>

例子三

<body>
<div id="app">
<mycom3>

</mycom3>
</div>

<!-- 在被vue实例mouth的外面使用template 元素，定义组件的模板结构 -->
<template id = 'tmp1'>
<div>
<h1>
这是通过template创建的 ，在外部定义的组件 ，有代码的提示和高亮
</h1>
</div>

</template>
<script>
Vue.component('mycom3',{
template:'#tmp1'
})
var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
ai生活的码农 发布了22 篇原创文章 · 获赞 0 · 访问量 273 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航