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

局部组件demo:

html








js

varapp=newVue({
el:'#app',
components:{
'tab-title':{
props:['info'],//接受父元素传递的参数
template:'{{info}}'//点击时传递通过$emit子元素传递给父元素调用addactive方法(不能使用驼峰写法)
},
'tab-content':{
props:["content"],
template:'
{{content}}
' } }, methods:{ switchActive:function(index){ for(vari=0;i

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

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

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

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

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

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

例如:

vm.$data

vm.$methods

vm.$watch

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

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

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

热门推荐

免责声明:网站资源来源于网络,如有侵权,请及时联系删除。

Copyright © 2024 好资源导航网. All Rights Reserved.

蜀ICP备2021004611号-4 网站地图