vue 组件全局注册和局部注册的实现

发布时间：2020-12-17 02:33:34 所属栏目：百科来源：网络整理

导读：全局注册，注册的组件需要在初始化根实例之前注册了组件；局部注册，通过使用组件实例选项注册，可以使组件仅在另一个组件或者实例的作用域中可用：全局组件 js ' }) Vue.component('tab-content',{ props:['content'],template:' {{content}} ' }) 局部组

全局注册，注册的组件需要在初始化根实例之前注册了组件；

局部注册，通过使用组件实例选项注册，可以使组件仅在另一个组件或者实例的作用域中可用：

全局组件

js

' }) Vue.component('tab-content',{ props:['content'],template:'

' })

局部组件demo：

html

js

'//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法） },'tab-content':{ props:["content"],template:'

' } },methods:{ switchActive:function(index){ for(var i=0;i

   }
 },data:{
  navTabs:[
   {
    text:"tab1",isActive:true,tabContent:'this is tab1 content'
   },{
    text:"tab2",isActive:false,tabContent:'this is tab2 content'
   },{
    text:"tab3",tabContent:'this is tab3 content'
   }
  ]
 }
});</pre>

组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件可以使用父组件的数据，我们需要通过子组件的props选项。

子组件要显式地用 props 选项声明它期待获得的数据

在模板中，要动态地绑定父组件的数据到字模板的props,与绑定到任何普通的HTMO特性相类似。就是使用 v-bind。每当父组件的数据变化时，该变化也会传递给子组件：

所有的vuejs组件都是被扩展的vue实例

每一个Vue实例都会代理这个实例的data属性对象里的所有的属性

所有的Vue实例本身保罗的属性和方法，都以$开头来区别，对应Vue.set

例如：

vm.$data

vm.$methods

vm.$watch

这个有利于和data属性对象的数据来区分

多有的指令都以v-xxx形式存在：

以上这篇vue 组件全局注册和局部注册的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

vue 组件 全局注册和局部注册的实现