父子组件通信（props/emit）
父组件通过props的方式向子组件传递数据，子组件通过$emit向父组件通信。
父向子传值：
案例代码一：
注册路由：
{ path:'/demo04/parent', component:() => import('./../views/demo04/Parent.vue') },
views/demo04/Parent.vue
<template> <div id="parent"> <h1>{{ name }}</h1> <div class="section"> <Child :list="list"></Child> </div> </div> </template> <script> import Child from "./Child.vue"; export default { name: "parent", data() { return { name: "04.我是父组件", list: ["aaaa", "bbbb", "cccc", "dddd"], }; }, methods: {}, components: { Child, }, }; </script>
views/demo04/Child.vue
<template> <div id="child"> <h3>{{ name }}</h3> <span v-for="(item, index) in list" :key="index">{{ item }}<br/></span> </div> </template> <script> export default { name: "child", props: ["list"], data() { return { name: "我是子组件", }; }, methods: {}, }; </script> <style scoped> #child { background-color: rgb(20, 125, 218); } </style>
子向父传值：
案例代码二：
注册路由：
{ path:'/demo05/parent', component:() => import('./../views/demo05/Parent.vue') },
views/demo05/Parent.vue
<template> <div id="parent"> <h1>{{ name }}</h1> <div class="section"> <Child :list="list" @onEmitIndex="onEmitIndex"></Child> <p>{{ item }} => {{ currentIndex }}</p> </div> </div> </template> <script> import Child from "./Child.vue"; export default { name: "parent", data() { return { name: "05.我是父组件", currentIndex: -1, item: "init", list: ["aaaa", "bbbb", "cccc", "dddd"], }; }, methods: { onEmitIndex(args) { this.currentIndex = args.index; this.item = args.item; console.log("this.currentIndex", this.currentIndex); console.log("this.item", this.item); }, }, components:{ Child } }; </script> <style scoped> </style>
views/demo05/Child.vue
<template> <div id="child"> <h3>{{ name }}</h3> <button v-for="(item, index) in list" :key="index" @click="emitIndex(index, item)" > {{ item }} </button> </div> </template> <script> export default { name: "child", props: ["list"], data() { return { name: "我是子组件", }; }, methods: { emitIndex(index, item) { this.$emit("onEmitIndex", { index, item }); }, }, }; </script> <style scoped> #child { background-color: rgb(20, 125, 218); } </style>
兄弟组件通信（eventBus）
eventBus（兄弟组件通信、跨级通信）又称为事件总线，在Vue中可以使用它来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件，一般用来兄弟组件和隔代组件传值。
兄弟组件通信：
案例代码三：
bus.js
import Vue from 'vue' const bus = new Vue(); export default bus
main.js
import Vue from 'vue' import App from './App.vue' import router from './router/index' import Bus from './bus' Vue.config.productionTip = false Vue.prototype.$bus = Bus new Vue({ render: h => h(App), router:router, }).$mount('#app')
注册路由：
{ path:'/demo06/parent', component:() => import('./../views/demo06/Parent.vue') },
views/demo06/Parent.vue
<template> <div id="parent"> <h1>{{ name }}</h1> <Child1></Child1> <Child2></Child2> </div> </template> <script> import Child1 from "./Child1.vue"; import Child2 from "./Child2.vue"; export default { name: "parent", data() { return { name: "06.我是父组件", }; }, components: { Child1, Child2 }, }; </script> <style scoped> </style>
views/demo06/Child1.vue
<template> <div id="child1"> <button @click="additionHandle">+加法器</button> </div> </template> <script> export default { name: "Child1", data() { return { name: "我是子组件1", num: 1, }; }, methods: { additionHandle() { this.$bus.$emit("addition", { num: this.num++, }); }, }, }; </script> <style scoped> #child1 { background-color: rgb(20, 125, 218); } </style>
views/demo06/Child2.vue
<template> <div id="child2"> 计算和：<br />child1Num => {{ child1Num }}<br />count + child1Num => {{ count }} </div> </template> <script> export default { name: "Child2", data() { return { name: "我是子组件2", child1Num: 0, count: 0, }; }, mounted() { this.$bus.$on("addition", (args) => { this.child1Num = args.num; this.count = this.count + args.num; }); }, }; </script> <style scoped> #child2 { background-color: rgb(43, 218, 20); } </style>
