vue3组件间的通信,通过props,emit,provide和inject把数据传递N个层级,expose和ref实现父组件调用子组件方法

文章目录

      • 一、父组件数据传递N个层级的子组件
        • vue3 provide 与 inject
        • A组件名称 app.vue
        • B组件名称 provideB.vue
        • C组件名称 provideCSetup.vue
      • 二、使用v-model指令实现父子组件的双向绑定
        • 父组件名称 app.vue
        • 子组件名称 v-modelSetup.vue
      • 三、父组件props向子组件传值
        • 子组件 propsSetup.vue
        • 父组件 app.vue
      • 四、子组件emit向父组件传值
        • vue3 events 事件
        • 子组件eventsSetup.vue 定义事件
        • 父组件app.vue接收子组件eventsSetup.vue的done事件
      • 五、通过expose和ref来实现父组件调用子组件的方法
        • 父组件 app.vue
        • 子组件名称 child.vue

一、父组件数据传递N个层级的子组件

vue3 provide 与 inject

我们通过props属性可以把数据传给组件,而通过provide与inject我们可以把数据传递给N个层级的子组件,比如A组件用了B组件,B组件用了C组件,它可以把组件直接从A传给C组件,vue2使用computed来实现响应式,而vue3中 provide 使用ref或reactive定义的变量即可实现响应式。

A组件传入值,传入了userInfo对象,不用管传给谁了谁,谁都可以去接收key为provideCount的数据

A组件名称 app.vue
<!-- A组件名称 app.vue -->
<template><div class="itxst"><label>A组件显示:{{state.userInfo.count}}</label><!-- 我是A组件调用了B组件,我可以把值传给B或C组件 --><bcomp /></div>
</template><script setup>
//导入 provide
import { reactive,provide } from "vue";
import bcomp from "./provideB.vue";
//定义需要传递的对象
const state=reactive({userInfo:{count:1}})
//定了 provide 的 key 和 要传递的值
provide("provideCount",state.userInfo);
</script>

B组件调用C组件,但是我啥也没干

B组件名称 provideB.vue
<!-- B组件名称 provideB.vue -->
<template><div class="b"><!-- 我是B组件调用了C组件 --><ccomp/></div>
</template><script setup>
import { reactive } from "vue";
import ccomp from "./provideCSetup.vue";
</script>

C组件获取A组件传入的值,我修改了userInfo的值,A组件也会跟着变哦。

C组件名称 provideCSetup.vue
<!-- C组件名称 provideCSetup.vue -->
<template><div class="c"><!-- 我是C组件获取了A组件的值 --><div >C组件显示:  {{ userInfo.count }}</div> </div>
</template><script setup>
import { inject, reactive } from "vue";
//获取 provide 传入的值
const userInfo = inject('provideCount');//测试响应式
setInterval(function(){userInfo.count=userInfo.count+1},1000)
</script>

二、使用v-model指令实现父子组件的双向绑定

v-model是vue3的一个内置指令,可以实现父组件变量(不能是常量)与子组件属性的双向绑定,我们在很多知名的开源库可以看到这个命令,比如我们要实现一个弹窗组件需要父组件和子组件都可以操作这个变量来实现隐藏显示统一步调。

<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
<!-- ant design 弹窗组件使用了 v-model 指令 -->
</a-modal>
父组件名称 app.vue

在父组件中,使用v-model指令将子组件的某个prop绑定到父组件的某个变量上

<template><div class="itxst"><!-- 自定义v-model 名称--><demo v-model:show="state.show" v-model:message="state.message"></demo><button @click="showDlg">点击弹窗</button> </div>
</template><script setup>
import { reactive } from "vue";
import demo from "./v-modelSetup.vue";
//定义要使用v-model的变量show和message
const state = reactive({show: false,message: "https://www.itxst.com",
});//按钮事件,我们改变show的值
const showDlg = () => {state.show = true;
};
</script>

v-modelSetup.vue子组件实现修改v-model的值(属性值)

子组件名称 v-modelSetup.vue

在子组件中,将子组件的某个prop绑定到子组件的某个变量上,并在该变量上使用计算属性或观察者监听该prop的变化

<template><div class="itxst" v-if="show"><div>{{ message }}</div><div><button @click="ok">确定</button></div></div>
</template><script setup>
import { ref, reactive } from "vue";
// 定义了 show 和 message 属性
const props = defineProps({show: {type: Boolean,default: false,},message: {type: String,default: "",},
});//修改属性的值,定义emits可修改 show 和 message 属性
const emits = defineEmits(["update:show", "update:message"]);//确定按钮的事件
const ok = () => {//关闭弹窗emits("update:show", false);
};
</script><style scoped >
/* 样式省略,请在试一试中查看 */
</style>

三、父组件props向子组件传值

vue3 通过 props 来定义属性,我们可以通过属性将值传给自定义组件,比如颜色、高度宽度等等,定义属性时我们也可以定义类型和默认值,本文重点描述了如何定义属性和修改属性的值。

子组件 propsSetup.vue
<!-- 子组件 propsSetup.vue -->
<template><div class="itxst"><div :style="{ color:props.color }">{{msg}}</div><!--绑定属性--><input :style="{ color:props.color ,height:props.height+'px'}"  @input="onInput" /> </div></template><script setup> import { ref, reactive } from "vue";/** 定义组件的属性* type 表示属性类型* default 表示默认值*/const props = defineProps({msg: {type: String,default: "www.itxst.com",},color: {type: String,default: "#000",},height:{type:Number,default:120,}});/*也可以通过数组方式定义属性,缺点是不能定义类型和默认值const props = defineProps(['msg','color']);*/</script><style scoped>
</style>

使用该自定义组件

父组件 app.vue
<!-- 父组件 app.vue -->
<template><!-- 传入了color和height属性 --><demo color="red" :height="30"/>
</template>
<script setup>
import { ref, reactive } from "vue";
// 导入组件,因为是setup语法糖,所以无需手动注册组件
// demo为当前页的组件名称你可以随便取名, "./components/propsSetup.vue" 是组件的路径
import demo from "./components/propsSetup.vue";
</script>

四、子组件emit向父组件传值

vue3 events 事件

事件是组件开发中必不可少的部分,事件就是当你完成了某个任务后你把这个事情告诉别人的动作,比如你在组件中保存成功了数据等等,本文将介绍任何在vue3中定义事件以及调用者任何接收这个事件。

子组件eventsSetup.vue 定义事件
<template><div class="itxst"><!--子组件eventsSetup.vue 定义事件演示--> <input type="text" v-model="msg"  /><input type="button" value="点击试试" @click="onDone"/></div>
</template><script setup lang="ts"> import { ref } from "vue";const msg=ref('www.itxst.com');//定义一个点击完成事件 done 和 sent 两个事件const emits = defineEmits(["done","sent"]);//TS模式 定义emits/*const emits = defineEmits<{(event: "done", msg: String): void;(event: "sent"): void;}>();*/const onDone=()=>{//触发done事件,请把用户输入的值msg传出去emits("done", msg.value);//也可以不传参数//emits("sent");}
</script><style scoped>
.itxst{display: inline-block;padding: 6px;
}
</style>
父组件app.vue接收子组件eventsSetup.vue的done事件
<template><div>{{text}}</div><!--接收组件里面的done事件--><demo @done="onDone"/>
</template><script setup> import { ref } from "vue";import demo from './eventsSetup.vue'const text=ref('');//接收组件里面的done事件const onDone=(msg)=>{text.value='你输入了:'+msg;}
</script><style scoped>
</style>

五、通过expose和ref来实现父组件调用子组件的方法

vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option api(选项式 api)来演示父组件如何调用子组件的方法。

父组件 app.vue
<!-- 父组件 app.vue -->
<template><div class="itxst"><!-- 使用 ref  指令关联子组件 --><child ref="childComp"/><button @click="onTry">点击试一试</button></div>
</template><script setup>
import { reactive, ref } from "vue";
import child from "./child.vue";
//定义子组件实例,名称要和上面的ref相同
const childComp = ref(null);//访问demo组件的方法或对象
const onTry = () => {//获取到子组件的 title 数据 let msg = childComp.value.state.title;//调用子组件的 play方法childComp.value.play();
};
</script>
子组件名称 child.vue
<!--子组件名称  child.vue -->
<template><div class="itxst">{{ state.title }}</div>
</template><script setup>
import { ref, reactive } from "vue";
//定义一个变量
const state = reactive({title: "www.itxst.com",
});
//定义一个方法
const play = () => {state.title = "你调用了子组件的方法";
};//暴露state和play方法
defineExpose({state,play,
});
</script>

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

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

相关文章

VIO第3讲:基于优化的IMU与视觉信息融合之预积分残差雅可比推导

VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之预积分残差雅可比推导 文章目录 VIO第3讲&#xff1a;基于优化的IMU与视觉信息融合之预积分残差雅可比推导4 IMU 预积分残差的雅克比4.1 预积分残差4.2 残差对两个关键帧i、j状态量的雅可比① 速度误差 r v r_{v} rv​对i时刻…

高和汽车停工停产,创始人丁磊终于发话了!2024的冷门项目,投入小,但是真的很赚钱!

高和创始人丁磊站在停产停工的工厂呢&#xff0c; 环顾冷清❄️的四周&#xff0c;眉头紧锁&#x1f623;&#xff0c; 停顿片刻后对旁边同样愁眉苦脸的员工说道&#xff1a; 非常抱歉&#xff0c;因为经营的失误&#xff0c;面临了停产停工的窘境。 在互联网&#x1f517;、物…

力扣20.有效的括号

题目链接 这个学过数据结构栈的应用的基本上都会 就是把字符串进栈&#xff0c;如果是左边的括号&#xff0c;无脑入栈&#xff0c; 如果是右边的括号&#xff0c;那得看栈顶是不是和它匹配&#xff0c;如果匹配的话&#xff0c;一起出栈&#xff0c;如果不匹配&#xff0c;就先…

R语言【raster】——rasterize():栅格化点、线、面

Package raster version 3.6-27 Description 将与“对象”类型空间数据(点、线、多边形)相关的值转移到栅格单元。 对于多边形&#xff0c;如果多边形覆盖栅格单元的中心&#xff0c;则传输值。对于行&#xff0c;将值传输到与行接触的所有单元格。您可以通过先将多边形光栅化…

九、线性代数二-向量组的概念

目录 1、向量组的概念&#xff1a; 2、向量组线性组合的概念&#xff1a; 3、向量组的线性组合的矩阵表示&#xff1a; 4、向量组的线性组合的方程组表示&#xff1a; 1、向量组的概念&#xff1a; 理解&#xff1a; 矩阵是一个特殊的向量组。 2、向量组线性组合的概念&…

软考40-上午题-【数据库】-关系代数运算2-专门的集合运算

一、专门的集合运算 1、投影 示例&#xff1a; 可以用属性名进行投影&#xff0c;也可以用列的序号进行投影。 2、选择 例题 1、笛卡尔积 2、投影 3、选择 3、连接 第一步都要算&#xff1a;笛卡尔积。 3-1、θ连接 示例&#xff1a; 3-2、等值连接 示例&#xff1a; 3-3、自…

嵌入式ARM LINUX实战开发-linux常用指令

链接&#xff1a;https://pan.baidu.com/s/1KTnzt19pzOE2Uwvp7d4E-w?pwd1688 提取码&#xff1a;1688 (1) ls&#xff08;list&#xff0c;列表&#xff09; 作用&#xff1a;使用列表把当前文件夹下所有文件显示出来 ls -a 显示所有文件&#xff0c;包括隐藏文件 ls …

如何准确查询自己的大数据信用报告?

在当今数字化时代&#xff0c;大数据信用报告在个人信用评估中扮演着越来越重要的角色。然而&#xff0c;很多人可能不知道如何查询自己的大数据信用报告。本文贷大家一起了解一下&#xff0c;希望对你有帮助。 如何准确查询自己的大数据信用报告&#xff1a; 一、找到可靠的查…

Python学习 --- 面向对象

1.什么是对象 1.Python中创建类的关键字是 class 2.类的成员方法 1.函数是写在类外面的,方法则是写在类里面的 1.上面这一段代码中就展示了如何在方法中访问类的成员变量: self.成员变量名 3.魔术方法 魔术方法其实就是python中的类中的内置方法,下面这几个只是我们比较常…

Linux应用- RabbitMQ安装

RabbitMQ安装部署【简单】 简介 RabbitMQ一款知名的开源消息队列系统&#xff0c;为企业提供消息的发布、订阅、点对点传输等消息服务。 RabbitMQ在企业开发中十分常见&#xff0c;为大家演示快速搭建RabbitMQ环境。 安装 rabbitmq在yum仓库中的版本比较老&#xff0c;所以…

Git基本操作(1)

Git基本操作&#xff08;1&#xff09; 初始化git本地仓库git本地仓库配置git config user.name 和git config user.emailgit config --unset user.name和git config --unset user.emailgit config --global 认识工作区&#xff0c;暂存区&#xff0c;版本库更深层次理解 git a…

做qt界面样式,写代码,好用的搜索工具,我推荐ai伙伴

ai伙伴 这里有最全的官方qss样式&#xff0c;但还是有点不全 有些qt样式要配合csdn来搜

Java学习26--枚举类

enum枚举 Java 枚举是一个特殊的类&#xff0c;一般表示一组常量&#xff0c;比如一年的 4 个季节&#xff0c;一年的 12 个月份&#xff0c;一个星期的 7 天&#xff0c;方向有东南西北等。 Java 枚举类使用 enum 关键字来定义&#xff0c;各个常量使用逗号 , 来分割。 enu…

微服务Day6

文章目录 DSL查询文档RestClient查询文档快速入门 旅游案例 DSL查询文档 RestClient查询文档 快速入门 Testvoid testMatchAll() throws IOException {//1.准备RequestSearchRequest request new SearchRequest("hotel");//2.准备DSLrequest.source().query(QueryB…

海外媒体推广通过5个发稿平台开拓国际市场-华媒舍

随着全球化的进程&#xff0c;国际市场对于企业的吸引力日益增加。进入国际市场并获得成功并非易事。海外媒体推广发稿平台成为了一种重要的营销手段&#xff0c;能够帮助企业在国际市场中建立品牌形象、传递信息和吸引目标受众。本文介绍了五个海外媒体推广发稿平台&#xff0…

Linux系统安装部署RabbitMQ详细教程(图文详解)

前言:在分布式系统中进行消息传递和通信时,可能会用到RabbitMQ,这边我写一篇简易的部署教程,带大家了解一下,只要跟着文章一步步走就可以部署成功了,其中的坑博主都替大家踩过了。 博主的其他部署教程: 1、Docker部署前后端分离项目:手把手通过Docker部署前后端分离项目…

Linux:gcc的基本知识

gcc 是一个将C语言文件变成可执行文件的工具。 在Linux中&#xff0c;如果需要将一个C语言文件变得可以执行&#xff0c;那么除了这个文件本身的内容是C语言编写的内容外&#xff0c;还需要gcc这个编译工具进行编译才行。 gcc 使用的格式方法:gcc 要编译的文件 //在该代码下…

【软件架构】05-高性能架构

1、缓存 设计思路&#xff1a; 1.什么数据应该缓存 2.什么时机触发缓存和以及触发方式是什么 3.缓存的层次和粒度&#xff08; 网关缓存如 nginx&#xff0c;本地缓存如单机文件&#xff0c;分布式缓存如redis cluster&#xff0c;进程内缓存如全局变量&#xff09; 1&#…

Flink checkpoint操作流程详解与报错调试方法汇总,增量checkpoint原理及版本更新变化,作业恢复和扩缩容原理与优化

Flink checkpoint操作流程详解与报错调试方法汇总&#xff0c;增量checkpoint原理及版本更新变化&#xff0c;作业恢复和扩缩容原理与优化 flink checkpint出错类型flink 重启策略Checkpint 流程简介增量Checkpoint实现原理MemoryStateBackend 原理FsStateBackend原理RocksDBSt…