vuejs如何实现父子组件相互通信

vuejs如何实现父子组件相互通信，下面编程教程网给大家详细介绍一下实现代码！

App.vue组件

<template>
  <div class="app">
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
    <add-counter @add="addBtnClick"></add-counter>  
    <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
    <sub-counter @sub="subBtnClick"></sub-counter>
  </div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
  export default {
  components: { 
  	AddCounter,
  	SubCounter
  },
  data() {
    return {
      counter:0
    }
  },
  methods:{
    addBtnClick(count) {
      this.counter += count
    },
    subBtnClick(count) {
      this.counter -= count
    }
  }
}
</script>

AddCounter子组件

<template>
  <div class="add">
    <button @click="btnClick(1)">+1</button>
    <button @click="btnClick(5)">+5</button>
    <button @click="btnClick(10)">+10</button>
  </div>
</template>
<script>
  export default {
    methods:{
      btnClick(count) {
        // 让子组件发出去一个自定义事件
        // 第一个参数自定义的事件名称，第二个参数是传递的参数
        this.$emit("add",count)
      }
    }
  }
</script>

SubCounter子组件

<template>
  <div class="sub">
    <button @click="btnClick(1)">-1</button>
    <button @click="btnClick(5)">-5</button>
    <button @click="btnClick(10)">-10</button>
  </div>
</template>
<script>
  export default {
    emits:["addd"],
    methods:{
      btnClick(count) {
        this.$emit("sub",count)
      }
    }
  }
</script>

子组件事件触发之后，通过this.$emit的方式进行发出事件！

以上是编程学习网小编为您介绍的“vuejs如何实现父子组件相互通信”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。