1、父组件传值给子组件 $props,子组件传值给父组件 $emit
父组件
<div id="app" >
<tree-component @func="getMsgFormSon" :childmsg="fatherParams"></tree-component> //引入的子组件,fatherParams 是要传给子组件的值(字符串、对象、方法都可以传)
</div>
var vm = new Vue({
el:'#app',
data:{
fatherParams:'我是你爹'
},
methods:{
getMsgFormSon(data){
console.log(data) //data 就是从子组件传过来的数据
}
}
})
子组件 Vue.component('tree-component', {
props:['childmsg'], //接收父组件传过来的值
data(){
return {
childParams:'我是子组件信息'
}
},
created:function(){
console.log(this.childmsg) //在初始化的是就可以输出 ‘我是你爹’ 这个服组件传过来的值了
},
template:'<div @click='passToFather()'></div>
methods:{
var self=this
passToFather(){
self.$emit('func',self.childParams) // self.childParams 是传给父组件的数据
}
}
})
$smit可以传递参数也可以传递事件
点击事件动态传值 ref
父组件
ref 获取到子组件的信息
子组件
二、兄弟之间传值eventBus
eventBus是一个传值总线,可以实现兄弟组件之间的传值通信,具体原理还没深入研究
基本用法:
在项目src下面的assete下建一个eventBus.js文件
在需要传值的A、B组件内引入
在组件A中定义一个点击事件触发传值
在B组件接收A组件传过来的值