组件要注意的事项有:
1、组件的data要用函数,一个组件的 data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
Vue.component('组件名',{
template:'<p>这是一个组件里的模板</p>', //这些都是选项
data:function(){
return{
count: 0
}
}
})
组件有两种,一种是全局组件,另一种是局部组件
全局组件可以在任何vue实例使用
Vue.component('runoob', { //注册全局组件
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app' //可以在这个实例使用
})
//创建第二个实例
new Vue({
el: '#app2' //也可以在这个实例使用
})
局部组件
var Child = {
template:'<h1>这是一个用变量定义的组件的值</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: { //注册局部组件,只能在这个实例使用
'runoob': Child //组件名 : 组件的值,可以直接写,也可以像本例子一样用变量对象
}
})
//第二个实例
new Vue({
el: '#app' //这里用不了上面的局部组件
})
局部组件只能在注册的那个实例上使用,如果想要局部组件里用局部组件,就要在局部组件里注册
例子:
var cop1 = { //用变量定义的局部组件1的值
template:'<h1>这是一个局部组件,并且值是用对象定义的</h1>'
}
var cop2 = { //组件2 的值
template:'<div><h3>这里是局部注册组件2,不过我在里面注册了cop1组件,所以可以用</h3><zj-1></zj-1><p>像这些有多个元素的模板,我们需要用一个父元素div包裹他,这样就能正常显示</p></div>',
components:{
'zj-1':cop1 //注册了组件1,所以可以使用组件1
}
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA, //局部组件1
'component-b': ComponentB //局部组件2
}
})