Second: communication between sibling nodes

Communication between two siblings: Child2 wants to modify the chid1 property plan.

1. Central EventBus

Define an EventBus(an instance of Vue) that uses $ON to listen, $emit to distribute, and a delegate to demonstrate the implementation process

EventBus

import Vue from 'vue'export default new Vue()Copy the code

The parent component, in fact, has nothing to do with the parent component, just to show the relationship between the two child components

<template>  <div>    {{childMsg}}    <child @changeByChild="changenameHandle"/>  </div></template><script>import child from '@/components/child'export default {  name: 'parent',  components: {    child  },  data () {    return {      childMsg: 'this is a child'    }  },  methods: {    changenameHandle (val) {      console.log(val)      this.childMsg = val    }  }}</script><style></style>Copy the code

Subcomponents child1

<template>  <div id="child1-wrap" class="child1-wrap">    {{plan}}  </div></template><script>import EventBus from '@/components/EventBus'export default {  name: 'child1'.data () {    return {      plan: 'I\'m going to have a move tomorrow' } }, created () { EventBus.$on('changePlanByChild2', (val) => { this.plan = val }) }}</script><! -- Add "scoped" attribute to limit CSS to this component only --><style scoped>.child1-wrap { font-size: 30px; color: brown; }</style>Copy the code

Subcomponents child2

<template>  <div id="child2-wrap" class="child2-wrap">    <input type="text"      @input="changePlan">  </div></template><script>import EventBus from '@/components/EventBus'export default {  name: 'child2'.data () {    return {    }  },  methods: {    changePlan (e) {      EventBus.$emit('changePlanByChild2', e.target.value) } }}</script><style scoped>.child2-wrap { font-size: 28px; color: aqua; }</style>Copy the code

Run the code to modify the input value in the child2 component. The plan property in child1 is also modified. We implement communication between sibling nodes through EventBus

Child1 –>child2

If so, we can conclude from the previous article: $emit = functions (props); $emit = functions (props); $emit = functions (props); Child2 then has the ability to “modify” Child2 and is no longer demo

Here we use a different approach, where the parent calls a method in the child (using $ref).

Vue provides refs to help us access or call properties and methods of child components within the parent component, as illustrated below

The parent component

<template>  <div>    <child1 ref="child1"/>    <child2 @changeChild1="changeChild1ByChild2"/>  </div></template><script>import child1 from '@/components/child1'import child2 from '@/components/child2'export default {  name: 'parent2',  components: {    child1,    child2  },  data () {    return {}  },  methods: {    changeChild1ByChild2 (val) {      console.log(this.$refs)      this.$refs.child1.changePlan(val)    }  }}</script><style></style>Copy the code

Child1 components

<template>  <div id="child1-wrap" class="child1-wrap">    {{plan}}  </div></template><script>import EventBus from '@/components/EventBus'export default {  name: 'child1'.data () {    return {      plan: 'I\'m going to have a move tomorrow' } }, methods: { changePlan (val) { this.plan = val } }, created () { // EventBus.$on('changePlanByChild2', (val) => { // this.plan = val // }) }}</script><! -- Add "scoped" attribute to limit CSS to this component only --><style scoped>.child1-wrap { font-size: 30px; color: brown; }</style>Copy the code

Child2 components

<template>  <div id="child2-wrap" class="child2-wrap">    <input type="text"      @input="changePlan">  </div></template><script>export default {  name: 'child2'.data () {    return {    }  },  methods: {    changePlan (e) {      this.$emit('changeChild1', e.target.value) } }}</script><style scoped>.child2-wrap { font-size: 28px; color: aqua; }</style>Copy the code

Here, we know how to access the content of the child component in the parent component and achieve the desired effect, right