vue-组件和组件传值
vue组件和组件传值
组件
组件是可复用的vue实例，且带有一个名字，可以通过 new Vue 创建的 Vue 根实例中把这个组件作为自定义元素来使用
组件中的data必须是一个function,其返回一个对象作为组件的数据
data() {
return {
count: 1,
};
}
注册组件
在vue中定义组件有两种常见的形式 全局注册和局部注册
全局注册：通过 Vue.componen定义，第一个参数为组件名 全局组件定义之后可以直接使用不需要注册
Vue.component('my-component-name', {
// ... options ...
})
局部注册 通过一个普通的 JavaScript 对象来定义组件
此对象包含有一些特殊的属性
template 模板内容
data 组件的数据, data必须是一个function,此function有一个对象做为返回值
methods 方法
computed 计算属性
… 其他的等等等等,所有vue中可以使用的方法或者属性都可以在组件内部使用
定义的组件必须只有一个根节点
局部组件在使用的时候需 components 属性进行注册：
var ComponentA = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
}
})
组件传值
常见的组件传值有三种：
1、父组件－－子组件传值 使用props
2、子组件向父组件传值 使用事件派发
3、非相关组件之间传值 – 空vue对象 $emit(‘ ’,数据) 发送 $on 接收
1、父到子传值
在子组件的组件标签上绑定自定义属性名,值为父组件需要传递的数据
子组件内部通过props属性 数组形式 接收属性名 ,模版内部加载属性名渲染展示父组件数据
Template 标签内 给子组件设置属性
在子组件的components设置
props:[‘msg’,‘n’], /*子组件接收数据*/
子组件的template内通过｛｛｝｝直接绑定数据即可
代码如下：
父组件－子组件
父组件
{{str}}
子组件
接收父组件传递的数据：－－{{a}}
var vm=new Vue({
el:"#out",
components:{
'v-parent':{
template:'#parent',
data(){
return{
str:'我是父组件的数据',
str1:''
}
},
methods:{
send(){
this.str1=this.str
}
},
components:{
'v-child':{
template:'#child',
props:['a'],
data(){
return{
}
}
}
}
}
}
})
2、子到父传值
在子组件组件标签上绑定自定义事件，子组件内部通过$emit给该事件推送数据，
父组件内部通过事件所绑定的函数参数进行数据接收
代码如下：
子组件－父组件
父组件
接收子组件的数据：－－{{tit}}
子组件
{{str}}
var vm=new Vue({
el:'#out',
components:{
'v-parent':{
template:"#parent",
data(){
return{
tit:''
}
},
methods:{
tap(msg){
console.log(msg)
this.tit=msg;
}
},
components:{
'v-child':{
template:'#child',
data(){
return{
str:'this is childs info'
}
},
methods:{
send(){
this.$emit('toparent',this.str)
}
}
}
}
}
}
})
3、非相关组件之间传值
事件总线 解决非相关组件之间传值
我们通过定义一个空白的对象 所有的事件派发和监听都在这个对象上进行
代码如下：
兄弟组件
AAAAAAAA组件
{{str}}
BBBBBB组件
{{str}}
CCCCCC组件
接收AAA组件数据：－－{{stra}}
接收BBBB组件数据：－－{{strb}}