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

vuejs如何实现父子组件相互通信，下面web建站给大家详细介绍一下实现代码！

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的方式进行发出事件！

Vue3如何通过子组件emit传递ref

vuejs实现全站联动

对vue进行多层组件监听

标签： emit, 组件监听

上面是“vuejs如何实现父子组件相互通信”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2728.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！