上一篇文章讲到Vue中父子组件通信,下面再聊聊非父子组件通信:
一.创建 input.vue 添加如下代码:
<template>
<div>
<p>Input Component</p>
<input type="text" v-model="message" placeholder="输入消息发送给dialog组件">
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
name: "inputCom",
data() {
return {
message: ""
};
},
methods: {
sendMessage(val) {
// 事件名字自定义,用不同的名字区别事件
this.$root.bus.$emit("changeMsg", this.message);
}
}
};
</script>
<style scoped>
</style>
二.创建dialog.vue 添加如下代码:
<template>
<div>
<p>Dialog Component</p>
<p>Receive Message From Input Component:<span :class="active">{{InputMessage}}</span></p>
</div>
</template>
<script>
export default {
name: "dialogCom",
data() {
return {
message: "hello input",
InputMessage: "未收到消息",
active: "MessageNo"
};
},
mounted() {
this.$root.bus.$on("changeMsg", Value => {
this.print(Value);
});
},
methods: {
print(Value) {
this.InputMessage = Value;
}
},
beforeDestroy() {
this.$root.bus.$off("changeMsg");
},
computed: {
classObject() {
return {
isReceived: this.InputMessage == "未收到消息" ? true : false
};
}
},
watch: {
InputMessage: function() {
console.log(this.active);
this.active =
this.InputMessage == "未收到消息" ? "MessageNo" : "MessageOk";
}
}
};
</script>
<style scoped>
.isReceived {
color: red;
}
.MessageOk {
color: green;
}
.MessageNo {
color: red;
}
</style>
三.创建nonParentChildCommunication.vue 文件添加如下代码:
<template>
<div>
<h3>非父子组件通信</h3>
<b>以下实现步骤:</b>
<ul>
<li>1.在 main.js 中 添加data属性
<pre class="prettyprint" v-text="mainJSCode">
</pre>
</li>
<li> 2.添加需要通信的非父子组件(项目中实现的步骤)</li>
<li>
2.1:创建 input.vue
<pre v-text="inputCode" class="prettyprint"></pre>
</li>
<li>
2.2创建 dialog.vue
<pre v-text="dialogCode" class="prettyprint">
</pre>
</li>
<li>
2.3:nonParentChildCommunication.vue
<pre v-text="nonParentChildCommCode" class="prettyprint"></pre>
</li>
</ul>
<hr height="10px" color="red">
<b>以下是效果:</b>
<Input></Input>
<hr>
<Dialog></Dialog>
</div>
</template>
<script>
import Input from "./input";
import Dialog from "./dialog";
export default {
name: "nonParentChildcommunication",
data() {
return {
mainJSCode: `
new Vue({
el: '#app',
data() {
return {
bus: new Vue() // 给data添加一个 名字为eventHub 的空vue实例,用来传输非父子组件的数据
}
},
router,
components: {
App
},
template: '<App/>',
}).$mount('#app'); // 手动挂载,#app
`,
inputCode: `
template:
<div>
<p>Input Component!</p>
<input type="text" v-model="message" >
<button @click="sendMessage">发送消息</button>
</div>
script:
export default {
name: "inputCom",
data() {
return {
message: ""
};
},
methods: {
sendMessage(val) {
// 事件名字自定义,用不同的名字区别事件
this.$root.bus.$emit("changeMsg", this.message);
}
}
};
`,
dialogCode: `
template:
<div>
<p>Dialog Component!</p>
<p>Input Component Transmit Message:{{InputMessage}}</p>
</div>
script:
export default {
name: "dialogCom",
data() {
return {
message: "hello input",
InputMessage: ""
};
},
mounted() {
this.$root.bus.$on("changeMsg", Value => {
this.print(Value);
});
},
methods: {
print(Value) {
this.InputMessage = Value;
}
},
beforeDestroy() {
this.$root.bus.$off("changeMsg");
}
};
`,
nonParentChildCommCode: `
template:
Input></Input>
<hr height="10px" color="red">
<Dialog></Dialog>
script:
import Input from "./input";
import Dialog from "./dialog";
export default{
components: {
Input,
Dialog
}
}
`
};
},
methods: {},
components: {
Input,
Dialog
}
};
</script>
<style scoped>
pre.prettyprint {
margin: 0 0 24px;
padding: 10px 0px 4px 0px;
background-color: #f6f8fa;
border: none;
}
b {
color: rgb(0, 47, 255);
}
</style>
如果 不是特别清楚 请 下载 完整项目自己跑下就清楚了
注意: src/components/Non-parent-childComponentsCommunicate下的文件为非父子组件通信