vue通信

1.父子间的通信

使用v-model双向绑定,如果组件有多个数据需要双向绑定使用 :prop.sync , update:prop

父级代码

<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>

子级代码

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

<script>
export default {
  props:['count','count1'],//双向绑定默认使用props['value'],需要用model将他更改为count
  model:{
    prop:'count',
    event:'input'
  },
  methods:{
    click(){
      this.$emit('input',this.count + 1)
    },
    click1(){
      this.$emit('update:count1',this.count1 + 1)
    }
  },
}

</script>

2.兄弟组件相互通信

通过 $parent.$on 向父级委托一个事件，并通过$parent.$emit 来触发这个事件

父级代码

<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>

子组件A代码

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

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

子组件B代码

<template>
  <div class="ChildrenB">
    <button>组件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>

表兄弟组件通信

1.通过 $root.$on 向根组件委托一个事件，并通过$root.$emit 来触发这个事件

子组件A代码

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

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

子组件B代码

<template>
  <div class="ChildrenB">
    <button>组件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>

2.也可以找到他们的共同父级，通过provide向子组件传递该节点，子组件在该节点上绑定事件进行通信

共同父级代码

<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>

子组件A代码

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

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

子组件B代码

<template>
  <div class="ChildrenB">
    <button>组件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>