vue组件全局注册、局部注册


定义:组件是可复用的 Vue 实例

全局组件:一般来说是在任何页面中任何位置都可以使用,比如:头部公共栏(navbar),底部公共栏(tabbar)

局部组件:只能定义在它的el中,不能使用在其他的位置,否则无效

注册类型:

1.全局注册

  Vue.component('my-component-name', {  // ... 选项 ... })

  第一个参数是组件名

  第二个参数  因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像 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
  },
  // ...
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM