Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,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/web/9034.shtml

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

相关文章

MyBatis认识

一、定义 MyBatis是一款优秀的持久层框架&#xff0c;它支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Old Java O…

【热门话题】ElementUI 快速入门指南

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 ElementUI 快速入门指南环境准备安装 ElementUI创建 Vue 项目安装 ElementUI 基…

SpringBoot之远程调用的三大方式

为什么要使用远程调用&#xff1f; SpringBoot不仅继承了Spring框架原有的优秀特性&#xff0c;而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程。在Spring-Boot项目开发中&#xff0c;存在着本模块的代码需要访问外面模块接口&#xff0c;或外部url链接的需求…

LeetCode 每日一题 ---- 【2079.给植物浇水】

LeetCode 每日一题 ---- 【2079.给植物浇水】 2079.给植物浇水方法&#xff1a;模拟-维护水的剩余量 2079.给植物浇水 方法&#xff1a;模拟-维护水的剩余量 模拟浇水和灌水的步骤就可以了&#xff0c;当剩余水大于等于需要浇的水&#xff0c;步数累加1即可&#xff0c;当剩余…

Golang 开发实战day13 - Reciver Functions

&#x1f3c6;个人专栏 &#x1f93a; leetcode &#x1f9d7; Leetcode Prime &#x1f3c7; Golang20天教程 &#x1f6b4;‍♂️ Java问题收集园地 &#x1f334; 成长感悟 欢迎大家观看&#xff0c;不执着于追求顶峰&#xff0c;只享受探索过程 Golang 开发实战day13 - 接收…

2万字长文:海豚调度器(DolphinScheduler)面试题深入了解

目录 海豚调度器的主要功能和特点 海豚调度器与Oozie、Azkaban等调度器相比的优势

第42天:WEB攻防-PHP应用MYSQL架构SQL注入跨库查询文件读写权限操作

第四十二天 一、PHP-MYSQL-SQL注入-常规查询 1.PHP-MYSQL-Web组成架构 MySQL(统一管理) ​ root&#xff08;自带默认&#xff09; ​ 网站A testA ​ 网站B testB MySQL(一对一管理) ​ testA用户 ​ 网站A testA ​ testB用户 ​ 网站B testB access无数据库用户 m…

三勾软件 / 三勾点餐系统门店系统,java+springboot+vue3

项目介绍 三勾点餐系统基于javaspringbootelement-plusuniapp打造的面向开发的小程序商城&#xff0c;方便二次开发或直接使用&#xff0c;可发布到多端&#xff0c;包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。 在…

LVS 负载均衡部署 NAT模式

一、环境准备 配置环境&#xff1a; 负载调度器&#xff1a;配置双网卡 内网&#xff1a;172.168.1.11(ens33) 外网卡&#xff1a;12.0.0.1(ens37)二台WEB服务器集群池&#xff1a;172.168.1.12、172.168.1.13 一台NFS共享服务器&#xff1a;172.168.1.14客户端&#xff…

Android的NDK开发中Cmake报缺少对应的x86的so文件

需要实现一个串口操作的命令。 供应商提供了2个so文件。 分别是 armeabi-v7a 和 arm64-v8a 添加到对应的cpp下。 在CMakeLists.txt里添加so文件 # 添加预编译的库 add_library(libxxx SHARED IMPORTED)# 设置库的路径 set_target_properties(libxxx PROPERTIES IMPORTED_…

springboot和html学院教务管理系统

端口号根据你实际运行程序的端口号来 访问地址&#xff1a;localhost:8080 学生 : student1 123456 管理员&#xff1a;admin 123456 老师&#xff1a;2020001 123456 sys_user 表是账号和密码

Android 11 新增设备支持语言

Android 系统默认支持多个国家语言。实现对整个android系统的语言设置,我们可以通过系统提供的 LocalePicker 里的方法来实现。 一、APP实现 1、权限设置 首先需要系统级的权限,在 AndroidManifest.xml 里申请权限: android:sharedUserId=“android.uid.system” <!--…

am62x edp屏调试

文章目录 am62x edp屏调试问题现象问题分析问题测试1 dtbo文件问题?2 ko文件问题3 驱动问题?4 问题定位:问题总结:附录设备结点:启动打印:am62x edp屏调试 问题现象 使用5.10内核配置的edp屏可以正常显示,但更新成6.1的内核后,不仅edp不正常工作,hdmi也不能正常工作…

隔离流量优化网络传输

不要将长流和短突发流(或者大象流和老鼠流)混部在一起&#xff0c;我建议用切片或虚通道将它们在全链路范围彻底隔离&#xff0c;而不仅仅在交换机上配合着大肆宣讲的高端包分类算法配置一些排队调度。 也不必扯泊松到达&#xff0c;帕累托分布&#xff0c;这些概念在论文建模…

Cocos Creator UlLabel的使用详解

前言 Cocos Creator是一款由Cocos公司开发的跨平台游戏开发引擎&#xff0c;它集成了Cocos2d-x引擎和Cocos Studio编辑器&#xff0c;可以帮助开发者快速地创建2D和3D游戏。在Cocos Creator中&#xff0c;UI系统是非常重要的一部分&#xff0c;而在UI系统中&#xff0c;UILabe…

Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗

Flutter笔记 Widgets Easier组件库&#xff08;13&#xff09;使用底部弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

使用HashMap实现,对一个字符集进行哈夫曼编码

最终达到的效果: 调用一个类 class HuffmanCodin{.....} 使用类中的静态方法&#xff0c;获取哈夫曼编码&#xff1a; 事前准备——哈夫曼树的节点定义 class Node implements Comparable<Node> {int weight;//权重Node left;Node right;char ch;//关键字&#xff0c…

单机轻松支持百万并发的go协程的简单tcpsocket服务端客户端通信小程序示例源码

单机轻松支持百万并发的go协程的简单tcpsocket服务端客户端通信小程序示例源码 服务端 server.go package mainimport ("bufio""fmt""io""net""os""strings""time" )// 简单的客户端服务端通信示例 /…

管理学SCI期刊,中科院4区,审稿快易录用,性价比超高!

一、期刊名称 Central European Journal of Operations Research 二、期刊简介概况 期刊类型&#xff1a;SCI 学科领域&#xff1a;管理学 影响因子&#xff1a;1.7 中科院分区&#xff1a;4区 出版方式&#xff1a;订阅模式/开放出版 版面费&#xff1a;选择开放出版需…

人大金仓报The connection attempt failed.Reason:Connection reset解决办法

在连接人大京仓数据库 的时候报下面的错误 解决办法&#xff1a; 更换这里的IP地址就行&#xff0c;不要用127.0.0.1&#xff0c;然后就可以了