vue组件全局注册、局部注册
定义:组件是可复用的 Vue 实例
全局组件:一般来说是在任何页面中任何位置都可以使用,比如:头部公共栏(navbar),底部公共栏(tabbar)
局部组件:只能定义在它的el中,不能使用在其他的位置,否则无效
注册类型:
1.全局注册
Vue.component('my-component-name', { // ... 选项 ... })
第一个参数是组件名
第二个参数 因为组件是可复用的 Vue 实例,所以它们与 new Vue
接收相同的选项,例如 data
、computed
、watch
、methods
以及生命周期钩子等。仅有的例外是像 el
这样根实例特有的选项。
注意:data必须是一个函数
当我们定义这个 <button-counter>
组件时,你可能会发现它的 data
并不是像这样直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data
选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
全局注册的行为必须在根 Vue 实例 (通过 new Vue
) 创建之前发生
2.局部注册
在模块系统中局部注册
例:
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... }