第二十章 Vue组件通信之父子通信

news2024/11/5 20:41:14

目录

一、引言

二、组件关系分类

三、组件通信的解决方案

3.1. 父子通信流程图

3.2. 父组件通过 props 将数据传递给子组件

 3.2.1. 代码App.vue 

3.2.2. 代码MySon.vue 

3.3. 子组件利用 $emit 通知父组件修改更新 

​编辑3.3.1. 代码App.vue

3.3.2. 代码MySon.vue 

3.3.3. 运行效果 

四、总结


一、引言

在使用Vue框架的日常开发中,我们会遇到各种场景需求涉及到到组件通信, 也就是指组件与组件之间的数据传递。

在Vue中组件之间会存在多种不同的组件关系,因此组件通信的方案也有所不同。

二、组件关系分类

1. 父子关系

2. 非父子关系

三、组件通信的解决方案

3.1. 父子通信流程图

3.2. 父组件通过 props 将数据传递给子组件

 3.2.1. 代码App.vue 

<template>
  <div class="App" style="border:3px solid #000;margin:10px">
    我是App组件
    <!-- 给组件标签以添加属性的方式去传值 -->
    <MySon :target="myTarget"></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
    data () {
        return {
            myTarget: '不畏将来,不念过往,把握当下。人生是一场漫长的修行,持续拼搏努力,未来一定会好的!'
        }
    },
    components: {
        MySon: MySon
    }
}
</script>

<style>

</style>

3.2.2. 代码MySon.vue 

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是MySon组件
    {{ target }}
  </div>
</template>

<script>
export default {
    // 通过props进行接收
    props: ['target']
}
</script>

<style>

</style>

3.3. 子组件利用 $emit 通知父组件修改更新 


3.3.1. 代码App.vue

<template>
  <div class="App" style="border:3px solid #000;margin:10px">
    我是App组件
    <!-- :target="myTarget" 给组件标签以添加属性的方式去传值 -->
    <!-- 父组件对消息进行监听 -->
    <MySon :target="myTarget" @changeTarget="handleChange"></MySon>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
    data () {
        return {
            myTarget: '不畏将来,不念过往,把握当下。人生是一场漫长的修行,持续拼搏努力,未来一定会好的!'
        }
    },
    methods: {
        // 提供处理函数和逻辑
        handleChange (newTarget) {
            console.log(newTarget)
            this.myTarget = newTarget
        }
    },
    components: {
        MySon: MySon
    }
}
</script>

<style>

</style>

3.3.2. 代码MySon.vue 

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是MySon组件
    {{ target }}
    <button @click="changeFn">修改我的目标</button>
  </div>
</template>

<script>
export default {
    // 通过props进行接收
    props: ['target'],
    methods: {
        changeFn () {
            // 1. 通过$emit,向父组件发送消息通知
            this.$emit('changeTarget', '学海无涯,把握每分每秒')
        }
    }
}
</script>

<style>

</style>

3.3.3. 运行效果 

四、总结

1. 两种组件关系分类和对应的组件通信方案

父子关系 → props & $emit

非父子关系 → provide & inject 或 eventbus

通用方案 → vuex

2. 父子通信方案的核心流程

2.1 父传子props:

① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用

2.2 子传父$emit:

① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229125.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用GDAL库的ogr2ogr将GeoJSON数据导入到PostgreSql中

数据下载 数据下载地址&#xff1a;https://datav.aliyun.com/portal/school/atlas/area_selector 我这里下载全国所有城市的数据进行导入 下载安装GDAL 以下是安装 ogr2ogr&#xff08;GDAL 工具集的一部分&#xff09;的步骤&#xff0c;适用于 Windows、macOS 和 Linux 系…

pycharm configurations中配置运行fastapi项目

环境 windows11 python3.11 fastapi0.115 使用virtualenv安装fastapi uvicorn pip install fastapi pip install uvicorn目的 在pycharm中可以一键运行&#xff0c;直接把命令行的运行参数配置到pycharm中, 即使用"uvicorn main:app --reload"运行main文件 配置 …

和小北一起Cozeplay | 扣子万圣节企划

前言&#xff1a; &#x1f383;&#x1f383;&#x1f383;在这个充满神秘与欢乐的万圣节季节&#xff0c;扣子携手小北&#xff0c;为大家带来了一场别开生面的Cozeplay活动&#xff01;无论你是想要体验一把惊悚刺激的万圣节氛围&#xff0c;还是想要展示自己的创意与才华&a…

工作转型与个人突破提升:如何在社会浪潮中激流勇进

文章目录 一、写在前面二、技术人的迷茫三、做好项目经理其实很难四、从纯技术者转型为管理者面临的事五、最重要的技能【重磅推荐&#xff01;免费简单内网穿透神器&#xff01;支持linuxwindows】 一、写在前面 近期工作变动&#xff0c;虽然说对于开发者而言&#xff0c;工…

为什么NMOS管比PMOS管更受欢迎?

NMOS在实际应用中为何比PMOS要更受欢迎。本文将从导电沟道、电子迁移率和器件速度等多个方面来展开讲解。 首先是在性能方面考虑&#xff1a; 与NMOS管驱动能力相同的一个PMOS管&#xff0c;其器件面积可能是NMOS管的2&#xff5e;3倍&#xff0c;然而器件面积会影响导通电阻…

Windows安装Git最新保姆级教程【附安装包】

一、Git下载: 链接&#xff1a;https://pan.baidu.com/s/1_uH-_-cdBb6GD58oLcxvAA 提取码&#xff1a;m366 二、安装Git 1.右键桌面【此电脑】-【属性】&#xff0c;查看操作系统是32位还是64位。 2.下载好对应64位操作系统版本的Git&#xff0c;解压并打开。 我电脑系统是64位…

网络通信与并发编程(七)GIL、协程

GIL、协程 文章目录 GIL、协程一、GIL二、协程 一、GIL GIL本质就是CPython解释器中的一把互斥锁。那既然是互斥锁&#xff0c;原理都一样&#xff0c;都是让多个并发线程同一时间只能有一个执行&#xff0c;以此确保共享数据的安全性。有了GIL的存在&#xff0c;同一进程内的…

6. 线程池实现

WebServer::thread_pool() 方法用于创建并初始化线程池&#xff0c;为服务器的并发处理能力提供支持。在 Web 服务器中&#xff0c;线程池用于管理多个工作线程&#xff0c;这些线程负责处理客户端的 HTTP 请求&#xff0c;以确保服务器可以同时处理多个并发请求&#xff0c;而…

基于Java的茶产品销售平台系统【附源码】

基于Java的茶产品销售平台系统 效果如下&#xff1a; 系统首页界面 用户登录界面 茶叶信息界面 在线客服界面 购物车界面 管理员登录界面 管理员功能界面 茶叶类型管理界面 研究背景 在当今社会&#xff0c;人们的生活节奏逐渐加快&#xff0c;人们对经济的要求逐渐降低&…

AI代币是什么?AI与Web3结合的未来方向在哪里?

近两年随着人工智能的崛起&#xff0c;AI已经渗透到制造业、电商、广告、医药等各个行业&#xff0c;加密货币领域也不例外&#xff0c;人工智能与区块链的融合&#xff0c;让我们看到了独特的数字资产 — AI加密代币。 它的流行始于2022年底&#xff0c;随着OpenAI智能聊天机…

Linux下MySQL8.x的编译安装与使用

Linux下MySQL的安装与配置 1. 安装环境初始化 1.1 查看是否安装过MySQL 如果使用rpm安装, 检查一下RPM PACKAGE rpm -qa | grep -i mysql # -i 忽略大小写 # 或者 yum list installed | grep mysql如果存在mysql-libs的旧版本包&#xff0c;显示如下 #存在 [rootlocalhost ~]…

如何在不安装WDK的情况下快速安装DevCon.exe?

你已经找到这里了&#xff0c;想必目的已经很清晰了&#xff0c;就是想要实现不安装WDK&#xff0c;又想使用Devcon.exe&#xff0c;那么往下看就对了。 这里直接上GitHub链接&#xff1a;https://github.com/Drawbackz/DevCon-Installer 考虑到网络环境&#xff0c;这里提供CS…

CSP/信奥赛C++刷题训练:经典二分例题(3):洛谷P8814[CSP-J 2022] 解密

CSP/信奥赛C++刷题训练:经典二分例题(3) [CSP-J 2022] 解密 题目描述 给定一个正整数 k k k,有 k k k 次询问,每次给定三个正整数 n i , e i , d i n_i, e_i, d_i ni​,ei​,di​,求两个正整数 p i , q i p_i, q_i pi​,qi​,使 n i = p i q i n_i = p_i \times…

git修改用户名与查看git的账号与密码

git修改用户名与查看git的账号与密码 文章目录 git修改用户名与查看git的账号与密码修改idea中代码提交的用户名查看git的账号与密码 修改idea中代码提交的用户名 1、打开您的IDEA&#xff0c;点击打开最下方的Terminal终端 2、输入以下命令&#xff0c;并回车执行 查看当前…

linux 安装php扩展:xlswriter

这里以xlswriter扩展为例 进入官方扩展&#xff1a;https://pecl.php.net查询自己php对应版本的扩展包 下载扩展 wget https://pecl.php.net/get/xlswriter-1.5.5.tgz 解压扩展 tar -zxvf xlswriter-1.5.5.tgz 进入扩展目录 cd xlswriter-1.5.5 查找对应php版本的phpiz…

解决电脑突然没有声音

问题描述&#xff1a;电脑突然没有声音了&#xff0c;最近没有怎么动过系统&#xff0c;没有安装或者卸载过什么软件&#xff0c;也没有安装或者卸载过驱动程序&#xff0c;怎么就没有声音了呢&#xff1f; 问题分析&#xff1a;仔细观察&#xff0c;虽然音量按钮那边看不到什…

php命令执行的一些执行函数----以ctfshow靶场为解题思路

PHP命令执行 一招鲜&#xff0c;吃遍天 cshow_source("flag.php"); cinclude($_GET[1]); cinclude("flag.php");var_dump(get_defined_vars()); web30&#xff1a; 这道题目过滤了flag,system,php。 那么我们 解法1&#xff1a;passthru ?cpassthru(…

mathorcup2024台风 我all in ai

三个问题&#xff0c;力大砖飞。 不建物理模型&#xff0c;直接all in好吧 第一个故意无监督 第二个LSTMCNN注意力&#xff0c;刚好时间空间 第三个在第二个上加了个transfomer &#xff0c;然后LSTM变双向&#xff0c;增加层数&#xff08;基线模型选的经验公式&#xff0c;少…

详细分析与梳理Java基础中的重点知识:String类 ,Java字符串String类入门,剖析String类底层机制

一、什么是String类&#xff1f; 众所周知&#xff0c;String类代表字符串类型。Java中所有被双引号包裹的字符串都是String类的对象。 &#xff08;比如&#xff1a;"zhangsan" , "lisi" , "博主是帅哥" , "123Abc"......&#xff0…