起步 - 从场景中看父子组件间通信

2024-06-19 23:38

本文主要是介绍起步 - 从场景中看父子组件间通信,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1140602-20171025194848754-2026039505.png

组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互。

在vue中,父子组件的关系可以总结为props down,events up

在vue2.0中废弃了$dispatch$broadcast,子组件使用event发出自定义事件

1140602-20171029212721976-1727722995.png

 父子组件之间的通信

 思考场景如下:

  一个总群(父组件)中大家做自我介绍,

  陌陌、小小、可可、天天 收到 总群发来的消息之后(父传子将自己的信息发送到总群(子传父

父组件 

template


<
template><div><h4>父组件>></h4><div><span>{{ somebody }}</span> 说: 我来自 <span>{{ city }} </span></div><hr><!-- aGirls和noticeGirl通过props传递给子组件 --><!-- introduce通过$emit子组件传递给父组件 --><v-girl-group :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></v-girl-group></div> </template>

 我使用的组件间通信:

  • aGirls和noticeGirl通过 props 传递给子组件
  • 通过 $emit 子组件传递给父组件,v-on来监听父组件自定义事件($emit的变化)

script

<script>
import vGirlGroup from './components/HelloWorld'
export default {name: 'girl',components: {vGirlGroup},data () {return {aGirls:[{name:'陌陌',city:'GuangZhou'},{name:'小小',city:'BeiJing'},{name:'可可',city:'American'},{name:'天天',city:'HangZhou'}],somebody:'',city:'',noticeGirl:''}},methods: {introduceSelf (opt) {this.somebody = opt.name;this.city = opt.city;// 通知girl收到消息this.noticeGirl = opt.name + ',已收到消息';}}
}
</script>

这里的 introduceSelf 就是父组件接收到子组件发出的$emit事件处理程序

子组件

 template

<template><div><h4>子组件>></h4><ul><li v-for="(value, index) in girls">{{ index }} - {{ value.name }} - {{ value.city }} <button @click="noticeGroup(value.name,value.city)">发送消息</button></li> </ul><div class="msg">接收来自父组件的消息:{{ noticeGirl }}</div></div>
</template>

script

子组件通过$emit发出自定义事件

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

结果

 1140602-20171030204023230-773657287.gif

到这里,我们已经根据vue2.0父子间通信实现了上面提出的一个场景 .

相比vue1.0的变化:具体可以参考:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

 

这篇关于起步 - 从场景中看父子组件间通信的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076481

相关文章

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

Java 枚举的基本使用方法及实际使用场景

《Java枚举的基本使用方法及实际使用场景》枚举是Java中一种特殊的类,用于定义一组固定的常量,枚举类型提供了更好的类型安全性和可读性,适用于需要定义一组有限且固定的值的场景,本文给大家介绍Jav... 目录一、什么是枚举?二、枚举的基本使用方法定义枚举三、实际使用场景代替常量状态机四、更多用法1.实现接

java -jar命令运行 jar包时运行外部依赖jar包的场景分析

《java-jar命令运行jar包时运行外部依赖jar包的场景分析》:本文主要介绍java-jar命令运行jar包时运行外部依赖jar包的场景分析,本文给大家介绍的非常详细,对大家的学习或工作... 目录Java -jar命令运行 jar包时如何运行外部依赖jar包场景:解决:方法一、启动参数添加: -Xb

C/C++ chrono简单使用场景示例详解

《C/C++chrono简单使用场景示例详解》:本文主要介绍C/C++chrono简单使用场景示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录chrono使用场景举例1 输出格式化字符串chrono使用场景China编程举例1 输出格式化字符串示

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

Java集成Onlyoffice的示例代码及场景分析

《Java集成Onlyoffice的示例代码及场景分析》:本文主要介绍Java集成Onlyoffice的示例代码及场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 需求场景:实现文档的在线编辑,团队协作总结:两个接口 + 前端页面 + 配置项接口1:一个接口,将o