vue父子组件的通信
父组件给子组件传值：
1.父组件调用子组件的时候直接在子组件上绑定动态属性(例如子组件v-header)
<v-header :title="title"></v-header>    :title//是绑定的属性名字随意   "title"是绑定的数据
2.子组件里面通过props接受父组件传的数据
props:["title"]或者是验证的方式
props:{
"title":String
}
3.直接在子组件里面使用
可以直接使用{{title}}
传递方法同理：
1.父组件调用子组件的时候直接在子组件上动态绑定方法
<v-header :getData="getData"></v-header>    :getData//是绑定的方法名字随意   "getData"是绑定的方法（父组件中methods里面定义）
2.子组件里面通过props接受父组件传的方法
props:["title"]或者是验证的方式
props:["getData"]
3.子组件中使用该方法比如点击按钮时调用：
<button @click="getData()"></button>
直接整个父组件传递给子组件
1.父组件调用子组件的时候直接在子组件上绑定动态属性(例如子组件v-header)
<v-header :home="this"></v-header>    :title//是绑定的属性名字随意   "title"是绑定的数据
2.子组件里面通过props接受父组件传的数据
props:["title"]或者是验证的方式
props:["home"]
3.直接在子组件里面使用
可以直接使用:this.home.数据名称     this.home.方法名称（）调用
父组件主动获取子组件的数据和方法：
1.调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
2.在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法（）
子组件主动获取父组件的数据和方法：
this.$parent.数据
this.$parent.方法（）
非父子组件之间的通信(事件广播的方式)
1.新建一个新的vue实例
新建一个js文件vueEvent.js
import Vue from "vue";
var VueEvent = new Vue();
export default VueEvent ;
2.比如在home组件中给News组件发广播，就在这个组件中引入刚才新建的vue实例，例子如下：
home组件：
<template>
<div id="home">我是home组件</div>
<button @click="emitNews()">给news组件广播数据</button>
</template>
<script>
//引入上述新建的vue实例
import VueEvent  from  "./vueEvent.js"(路径自己放，对应相应的路径即可)
export default{
  data(){
    return{
      msg:'我是home组件'
    }
  },
methods:{
emitNews(){
//广播数据
VueEvent.$emit("to-news",this.msg)
}
}
}
</script>
3.在news组件中监听：
<template>
<div id="news">我是新闻组件</div>
</template>
<script>
//引入上述新建的vue实例
import VueEvent  from  "./vueEvent.js"
data(){
    return{
      msg:'我是新闻组件'
    }
  },
mounted:{
VueEvent.$on("to-news",function(data){
console.log(data);//data就是父组件传递过来的数据
})
}
</script>


---------------------本文来自 weixin_42554311 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/weixin_425 ... 554?utm_source=copy

奈斯