VUE 父子组件之间通信传值 props和 $emit

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组件传过来的值