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

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

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

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

全局组件

js

vue.component('tab-title',{

props:['title'],

template:'

})

Vue.component('tab-content',{

props:['content'],

template:'

})

局部组件demo：

html

v-bind:class="['tab-panel',{active:navTab.isActive}]" v-if="navTab.isActive">

js

var app=new Vue({

el: '#app',

components: {

'tab-title': {

props:['info'],//接受父元素传递的参数

template:'

},

'tab-content':{

props:["content"],

template:'

}

},

methods:{

switchActive:function(index){

for(var i=0;i

this.navTabs[i].isActive=false;

}

this.navTabs[index].isActive=true;

}

},

data:{

navTabs:[

{

text:"tab1",

isActive:true,

tabContent:'this is tab1 content'

},

{

text:"tab2",

isActive:false,

tabContent:'this is tab2 content'

},

{

text:"tab3",

isActive:false,

tabContent:'this is tab3 content'

}

]

}

});

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

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

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

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

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

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

例如：

vm.$data

vm.$methods

vm.$watch

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

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

this.navTabs[i].isActive=false;

}

this.navTabs[index].isActive=true;

}

},

data:{

navTabs:[

{

text:"tab1",

isActive:true,

tabContent:'this is tab1 content'

},

{

text:"tab2",

isActive:false,

tabContent:'this is tab2 content'

},

{

text:"tab3",

isActive:false,

tabContent:'this is tab3 content'

}

]

}

});

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

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

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

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

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

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

例如：

vm.$data

vm.$methods

vm.$watch

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。