一、全局(组件)注册
1. 直接通过Vue.component()定义
完整代码:
<div id="app">
<!--在创建的Vue根实例中,把这个组件作为自定义元素来使用组件-->
<counter></counter>
</div>
<script>
Vue.component("counter", {
data: function () {
return { count: 0 }
},
template:
'<button @click="count++">{{ count }} times</button>'
})
new Vue({
el: '#app',
data: {
}
})
</script>
- P.S. 数据属性data 必须是一个返回值的函数
2. 外围定义template标签再通过id引用
3. 组件的复用
可以将组件进行任意次数的复用:
效果:
二、局部(组件)注册
1. 区别
- 作用域不同,局部组件只能在该实例挂载的元素内使用
- 写法不同:
- 上面讲的只是声明注册,没有内容展示不出东西。在组件中添加 template 属性即可:
效果:
- 调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
- 如果不需要全局注册,可以用选项对象的components属性实现局部注册
- 局部组件component要加s
2. 其他(常用)写法
- 最常用写法:var变量,再引用到Vue实例中的component属性
- 好处:该变量可引用到任意实例中,且代码易读,Vue实例中不会太乱
- 在html中添加标签(标签名可任意定义),好处如下:
- 有代码提示功能
- 其他方式必须要有一个父标签,同级标签不显示,而这个方式可以