vue组件间的通信案例

组件间通信方式汇总

父子组件间的通信方式

父向子组件的通信方式

// 在父组件中定义props数据，并绑定在子组件上
<template>
<div id="parent">
<input type="text" v-modal="parentMsg"/>
<Child v-bind:parentMsg="parentMsg"></Child>
</div>
<template>

<script>
import Child form "./component/Child";
export default {
name:"Parent",
data(){
return {
parentMsg:"this message from parent",
}
}
}
</script>

// 子组件通过props接收父组件传递数据
<template>
<div id="child">
{{parentMsg}}   //展示接收数据
</div>
</template>

<script>
export default {
name:"Child",
props:{
parentMsg :{
type: String,   // prop 指定验证规则。
require : true,
default : ""
}
},
data(){
return {

}
}
}
</script>

子向父组件的通信方式

//子组件通过$emit传递数据
<template>
<div id="child">
<button @click="childEvent">Btn</button>   //自定义childEvent事件 触发时传递数据
</div>
</template>

<script>
export default {
name:"Child",
data(){
return {
childMsg:"this message from Child",
}
}
methods:{
childEvent:function(){
this.$emit("sendChildEvent",this.childMsg);   //触发当前实例上的事件<sendChildEvent>。附加参数都会传给监听器回调。
}
}
}
</script>

//父组件通过vm.$emit( event, […args] )//监听自定义事件event，获取子组件传递数据

<template>
<div id="Parent">
<Child @sendChildEvent="parentEvent"></Child>  //触发自组件自定义事件
</div>
</template>

<script>
export default {
name : "Parent",
data(){
return {
parentMsg : "default msg",
}
},
methods:{
parentEvent:function(data){
this.parentMsg = data;   //子组件数据通过回调传递给this.parentMsg
}
}
}
</script>

//当子组件中$emit(“sendChildEvent”,data) 通过Click事件触发

//父组件监听自定义事件sendChildEvent ， 获取数据

兄弟组件间的通信方式

各组件为了保证各自的独自性，不允许直接传递数据，
如果小项目建议直接使用Bus方式，如果是大型项目最好用vuex方式处理 state

- Bus.js方式

一个简单的案例：两个按钮分别为不同组件。



主要思路：

Bus.$emit(event,data) 触发自定义事件

Bus.$on(event,function(data){}) 监听自定义事件，并通过回调获取传递数据

//首先新建Bus.js 文件

import Vue from "vue"
export default new Vue

//分别在兄弟组件中引用Bus.js 文件

// module 1
<template>
<div id="Module1">
<button @click="incrementHandler">{{count}}</button>
</div>
</template>

<script>
import Bus from "./Bus.js"
export default {
name:"BtnModule1",
data(){
return {
count:5,
}
},
methods : {
incrementHandler: function () {
if (this.count < 10) {
this.count++;
}
Bus.$emit("increment1", this.count);   // Bus.$emit触发 自定义事件
}
},
created(){
Bus.$on("increment2", function (data) {   //监听组件btn2事件
$that.count1.count = 10 - data;
});
}，
beforeCreate() {
$that.count1 = this       //创建全局变量，接收this --》 ①
}
}
</script>

//Btn2 以同样的方式创建

这里仅讨论兄弟组件间的数据传递，对全局变量的引用可以忽略。

① 全局this的写法可以参考这里

2。 Vue声明周期可以参考https://blog.csdn.net/weixin_37064409/article/details/78881045“>这里

vuex方式