Vue3.0中父子组件的通信和访问方式

最新推荐文章于 2024-01-29 13:03:28 发布
最新推荐文章于 2024-01-29 13:03:28 发布
阅读量683 收藏 2
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QNANWang/article/details/115056592
版权

一、组件

组件的使用：创建-引入-声明-使用

二、父子组件之间的通信

（1）父传子props

父亲向父组件中传参，子组件通过props接收
可以声明类型，默认值，如果有数据那么默认值不生效，如果没有数据则默认值生效。
在这里插入图片描述

（2）子传父$emit

子组件向父组件中传参，需要通过$emit
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
在这里插入图片描述
在这里插入图片描述

三、父子组件之间访问的方式

（1）父组件调用子组件的方法 c h i l d r e n （ V u e 2.0 ） 或 children（Vue2.0）或 children（Vue2.0）或refs

在这里插入图片描述

（2）子组件调用父组件的方法通过： p a r e n t （ 上 一 级 ） 或 parent（上一级）或 parent（上一级）或root(根节点方法)

this. p a r e n t . 方 法 名 （ ） t h i s . parent.方法名（） this. parent.方法名（）this.root.方法名（）

QNAN-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3.0父子组件数据交互
06-11
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...
解读vue3中的$refs、$parent、$root、provide 和 inject
九仞山的专栏
06-09 4794
详细介绍了vue3中的$refs、$parent、$root、provide 和 inject各自的用法和优缺点
vue3使用setup语法糖
weixin_47560151的博客
07-12 4248
setup+vue3 总结：< script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容，不需要通过return暴露 声明的变量、函数以及import引入的内容，即可在< template/>使用，并且不需要写export default{} < script setup>语法糖里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 < script> 只在组件被首次引入的时候执行一次不同，< script set...
【前端-VUE】Vue3组件组成部分及组件通信（详解）
最新发布
qq_48234463的博客
01-29 871
组件是Vue的核心，而组件间的状态管理和数据传递是开发绕不开的问题。在Vue中，组件和组件之间是相互独立的，所以需要一定的方法才能进行Vue的组件间的通信。
vue3.0父子组件的通信
浩星
03-02 4376
前言： vue3.0父子组件的通信 父传子：provide /inject 详情 子传父： 子组件： <el-button @click="changeParentNum('111')">点我给父组件发数据</el-button> setup (props, ctx) { const changeParentNum = data => { // 通过ctx调用emit事件 需要注意的是Vue2.x中使用 $emit切勿混淆 ...
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信
jieyucx的博客
07-23 2972
总而言之，Vue 3 中通过ref和$parent的结合使用，以及的方法，可以非常便捷地实现父子组件之间的通信。在实际开发中，合理运用这些技术，可以有效地提高组件之间的耦合性，加快开发效率，并且在一定程度上提高代码的可维护性和可读性。
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
vue组件中的父子组件通信两种方式
01-08
子组件是不能引用父组件或者vue的实例...父子通信的两种方式 1，用props向子组件传递数据 （vue实例是根组件，最大的父组件） num就是父传子的元素 {{cnum}} // 父传子 const cpn = { template: '#cpn', //
vue2.0父子组件及非父子组件之间的通信方法
08-31
给大家介绍了vue2.0父子组件及非父子组件之间的通信方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧
vue3组件通信之ref与$parent
m0_52222401的博客
05-22 1995
parent可以获取某一个组件的父组件实例VC,因此可以使用父组件内部的数据与方法。必须子组件内部拥有一个按钮点击时候获取父组件实例，当然父组件的数据与方法需要通过defineExpose方法对外暴露。提及到ref可能会想到它可以获取元素的DOM或者获取子组件实例的VC。既然可以在父组件内部通过ref获取子组件实例VC，那么子组件内部的方法与响应式数据父组件可以使用的。比如:在父组件挂载完毕获取组件实例。
vue3中的 $ref 和 $parent
weixin_45146319的博客
08-13 574
/ Ref<InstanceType<typeof Son> | null> 表示它可以持有Son组件的实例类型或null。子组件获取父组件的属性与方法，需要传入$parent，同时，父组件也需要使用。// 获取子组件dom与实例，变量名需要与子组件的ref一致。// 父组件要获取该组件的属性和方法需要暴露出去。
vue3 父组件调用子组件的方法
xiao_cheng_的博客
01-29 2万+
vue3调用子组件的方法 子组件 <template> <div></div> </template> <script setup> import { defineExpose } from 'vue' const dialogShow = (data) => { console.log(data) } defineExpose({ dialogShow }) </script> 父组件 <template&
vue3父组件调用子组件的方法
热门推荐
weixin_42252416的博客
11-23 3万+
vue3父组件调用子组件的方法，包括setup API 和 option API
vue3.0 父组件调用子组件方法及获取子组件的值
weixin_44132285的博客
08-25 1万+
vue3.0父组件调用子组件的方法并获取子组件里面定义的值
Vue3.0 + ts 父组件如何获取（调用）子组件的数据（方法）
CSND7997的博客
04-30 6390
Vue3.0 + ts 父组件如何获取（调用）子组件的数据（方法） 父组件调用子组件的方法，只需在父组件中操作 在父组件中引用的子组件添加ref属性，如下 <template> <div> <a-button @click="submit">提交</a-button> <Jelly ref="flow" ></Jelly> </div> </template> 引入ref from
vue3-实现父子组件之间的通信（详解+源码）
wzy_PROTEIN的博客
06-07 5894
vue3相对于vue2的父子传参方式有所改变，本文介绍三种：父组件给子组件传参、父组件调用子组件内的方法、子组件调用父组件的方法，如果不需要一种一种看可以直接下滑看全部代码，有注释也蛮好理解。
Vue3通信方式之ref、$parent、provide、inject、pinia和slot
tigerhhzz的博客
06-22 810
parent可以获取某一个组件的父组件实例,因此可以使用父组件内部的数据与方法。但是需要注意，如果想让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,因为vue3中组件内部的数据对外“关闭的”，外部不能访问。ref可以获取元素的DOM或者获取可以在父组件内部通过ref获取子组件实例， 子组件内部的方法与响应式数据父组件可以使用的。在父组件内部提供结构：Todo即为子组件,在父组件内部使用的时候，在双标签内部书写结构传递给子组件。在子组件内部的模板中书写slot全局组件标签。
vue3之$parent与$root的使用
weixin_47039303的博客
11-28 8074
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$parent的使用</title> </head> <body> <div id="app"> <!-- 可用于父拿子组件的数据 --> <p @click="clickComponent">xxx</p&g
vue3.0父子组件传参
08-12
- *3* [vue3.0父子组件传递参数](https://blog.csdn.net/weixin_49596018/article/details/118700349)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值