为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过Vue.component全局注册的:Vue.component('component-name', {
// ... options ...
})
该组件名Vue.component就是的第一个参数。
注册分为全局注册和局部注册:
1.全局注册:
全局注册的组件可以用在其被注册之后的任何 (通过new Vuew({ })) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
Vue.component("jishuqi",{
data:function () {
return {
count:0
}
},
template:'点击了{{count}}次'
})Vue.component("jishuqi2",{})
Vue.component("jishuqi3",{})
Vue.component("jishuqi4",{})var v=new Vue({
el:"#pp"
})
2.局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }然后在conponents选项中定义你想要使用的组件:new Vue({
el: '#app'
components: {
'jishuqi1': Jishuqi1,
'jishuqi2': Jishuqi2,
'jishuqi3': Jishuqi3
}
})
对于components对象中的每个属性来说,其属性名就是自定义元素的名字,其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。
如果你希望 Jishuqi1在 Jishuqi2中可用,则你需要这样写:var Jishuqi1 = { /* ... */ }
var Jishuqi2 = {
components: {
'jishuqi1': Jishuqi1
},
// ...
}
本文来源于网络:查看 >https://blog.csdn.net/yang__k/article/details/80336769