1. Correspondence between father and son

With V-model bidirectional binding, if the component has multiple data that needs bidirectional binding use :prop.sync, update:prop

The parent code

<template>
  <div id="app">
    <children v-model="count" :count1.sync="count1"></children>
  </div>
</template>

<script>
import Children from './components/children.vue'


export default {
  name: 'App'.components: {
    Children
  },
  data(){
    return{
      count:1.count1:5}}},</script>
Copy the code

The child code

<template>
  <div class="children">
    <button @click="click">{{count}}</button>
    <button @click="click1">{{count1}}</button>
  </div>
</template>

<script>
export default {
  props: ['count'.'count1'].// The default for bidirectional binding is props['value'], which needs to be changed to count by model
  model: {prop:'count'.event:'input'
  },
  methods: {click(){
      this.$emit('input'.this.count + 1)},click1(){
      this.$emit('update:count1'.this.count1 + 1)}}}</script>


Copy the code

2. Sibling components communicate with each other

Delegate an event to the parent via $parent.$ON and emit it via $parent.$emit

The parent code

<template>
  <div id="app">
    <ChildrenA></ChildrenA>
    <ChildrenB></ChildrenB>
  </div>
</template>

<script>
import ChildrenA from "./components/childrenA.vue"
import ChildrenB from "./components/childrenB.vue"

export default {
  name: 'App'.components: {
    ChildrenA,
    ChildrenB   
  },
}
</script>

Copy the code

Child component A code

<template>
  <div class="ChildrenA">
    <button @click="click">Component A</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenA'.methods: {click(){
      this.$parent.$emit("exchange"."i im from A")}}}</script>
Copy the code

Child component B code

<template>
  <div class="ChildrenB">
    <button>The component B</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenB'.methods: {received(mes){
      console.log(mes + ' to B')}},mounted(){
    this.$parent.$on('exchange'.this.received)
  }
}

</script>
Copy the code

The cousin component communicates

Delegate an event to the root component via $root.$ON and emit it via $parent.$emit

Child component A code

<template>
  <div class="ChildrenA">
    <button @click="click">Component A</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenA'.methods: {click(){
      this.$root.$emit("exchange"."i im from A")}}}</script>
Copy the code

Child component B code

<template>
  <div class="ChildrenB">
    <button>The component B</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenB'.methods: {received(mes){
      console.log(mes + ' to B')}},mounted(){
    this.$root.$on('exchange'.this.received)
  }
}

</script>
Copy the code

2. You can also find their common parent and pass the node to the child component by providing, on which the child component binds events to communicate

Common parent code

<template>
  <div id="app">
    <ChildrenA></ChildrenA>
    <ChildrenB></ChildrenB>
  </div>
</template>

<script>
import ChildrenA from "./components/childrenA.vue"
import ChildrenB from "./components/childrenB.vue"

export default {
  name: 'App'.components: {
    ChildrenA,
    ChildrenB   
  },
  provide(){
    return{
      $ownparent:this}}}</script>

Copy the code

Child component A code

<template>
  <div class="ChildrenA">
    <button @click="click">Component A</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenA'.inject: ['$ownparent'].methods: {click(){
      this.$ownparent.$emit("exchange"."i im from A")}}}</script>
Copy the code

Child component B code

<template>
  <div class="ChildrenB">
    <button>The component B</button>
  </div>
</template>

<script>
export default {
  name:'ChildrenB'.inject: ['$ownparent'].methods: {received(mes){
      console.log(mes + ' to B')}},mounted(){
    this.$ownparent.$on('exchange'.this.received)
  }
}

</script>
Copy the code