Vue2.x中的父子组件相互通信的实现方法_网络技术

Vue2.x中的父子组件相互通信的实现方法

发布时间 - 2026-01-11 00:55:23 点击率：次

业务场景:(这里指的是直接父子级关系的通信)

|美女|(子组件)将消息发送给大群(父组件)
大群(父组件)收到|美女|发送的消息后再回个信息给|美女|(子组件)

父组件

template

<template>
  <div>
    <p>群消息girl：</p>
    <div>
      {{ somebody }} 说: 我 {{ age }} 了。
    </div>
    <hr>
    <v-girl-group 
        :girls="aGirls" 
        :noticeGirl="noticeGirl"
        @introduce="introduceSelf"></v-girl-group>
  </div>
</template>

注意的点：

这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发

<script>
import vGirlGroup from './GirlGroup'
export default {
  name: 'girl',
  components: {
    vGirlGroup
  },
  data () {
    return {
      aGirls:[{
        name:'小丽',
        age:22
      },{
        name:'小美',
        age:21
      },{
        name:'小荷',
        age:24
      }],
      somebody:'',
      age:'',
      noticeGirl:''
    }
  },
  methods: {
    introduceSelf (opt) {
      this.somebody = opt.name;
      this.age = opt.age;
      // 通知girl收到消息
      this.noticeGirl = opt.name + ',已收到消息';
    }
  }
}
</script>

注意的点:

这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序

子组件

template

<template>
  <div>
    <ul>
      <li v-for="(value, index) in girls">
        {{ index }} - {{ value.name }} - {{ value.age }} 
        <button @click="noticeGroup(value.name,value.age)">发送消息</button>
      </li> 
    </ul>
    <div>接收来自大群的消息:{{ noticeGirl }}</div>
  </div>
</template>

script

<script>
export default {
  name: 'girl-group',
  props: {
    girls: {
      type: Array,
      required: true
    },
    noticeGirl: {
      type: String,
      required: false
    }
  },
  methods: {
    noticeGroup (name, age) {
      this.$emit('introduce',{
        name: name,
        age: age
      })
    }
  }
}
</script>

注意的点:

子组件使用$emit发出自定义事件

相比于Vue1.x的变化:

$dispatch 和 $broadcast 已经被弃用

*官方推荐的通信方式

首选使用Vuex

使用事件总线:eventBus,允许组件自由交流

具体可见：https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

结果

以上所述是小编给大家介绍的Vue2.x中的父子组件相互通信，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue父子组件通信 # vue2.0父子组件通信 # vue2.0父子组件及非父子组件之间的通信方法 # vue2.0父子组件间通信的实现方法 # 详解Vue2中组件间通信的解决全方案 # Vue2.0学习之详解Vue 组件及父子组件通信 # Vue2.0实现组件之间数据交互和通信操作示例 # Vue2中如何使用全局事件总线实现任意组件间通信 # 大群 # 自定义 # 小编 # 就会 # 在此 # 给大家 # 指的是 # 所述 # 给我留言 # 感谢大家 # 再回 # 小美 # 小丽 # 疑问请 # 有任何 # 发送消息 # 发送给 # noticeGirl # girls # introduce

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Linux如何查看磁盘使用情况 df命令详解

下一篇：javascript怎样操作音频视频_如何自定义播放器控件

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Linux如何查看磁盘使用情况 df命令详解

下一篇：javascript怎样操作音频视频_如何自定义播放器控件