vue3父子组件之间相互数据响应

最新推荐文章于 2024-05-17 08:00:00 发布
最新推荐文章于 2024-05-17 08:00:00 发布
阅读量212 收藏
点赞数
分类专栏： vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75509848/article/details/133033272
版权

前言：有时候存在这样的情况，修改子组件的用户信息,父组件中的用户信息跟着响应

1.需求效果

2.修改父组件中的头像,子组件中的头像也跟着改变(不用等到重新加载页面)

思路：整个思路就是子组件中暴露获取用户账号信息的方法(getAccountInfo()),而父组件中只需要在修改成功后通过子组件的节点调用子账号获取用户账号信息的方法就可以达到修改父组件的头像，子组件也跟着响应

子组件

industryEdit()方法是修改头像，getAccountInfo()是获取用户账号信息的方法；defineExpose()是用于暴露方法的系统方法。

父组件：在子组件标签上设置节点ref="RealName"

3.修改子组件中的头像,父组件中的头像也跟着改变(不用等到重新加载页面)

思路：整个思路就是子传父，在父组件中触发方法中重新获取用户账号信息

父组件

子组件

4.拓展说明

如果是孙子组件中修改头像，父组件头像也要跟着响应也同样是通过子传父的方式一步一步触发

℘团子এ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3做到父子级组件的双向响应式数据传输
domunweb的博客
08-30 2861
vue3父子级组件的双向响应式数据传输方式
vue3父子组件传值.doc
02-05
通过这种方式，Vue3实现了父子组件之间的数据传递和事件通信，简化了代码并提高了可读性。在实际开发中，开发者可以根据具体需求灵活运用`defineProps`和`defineEmits`，以实现更高效的组件间通信。
Vue3官网-深入组件（七）父子组件、插槽（\＜slot＞、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyn
qq_43456781的博客
09-19 323
Vue3官网-深入组件（三）父子组件、插槽（<slot>、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件keep-alive、异步组件 defineAsyncComponent 文章目录Vue3官网-深入组件（三）父子组件、插槽（\、作用域插值、具名插槽缩写）、 Provide / Inject（响应式）、动态组件`keep-alive`、异步组件 `defineAsyncComponent`1. 插槽\ \插槽内容渲染作用域备用内容具名插槽作用域插槽独占默认
详细分析Vue3中的props用法（父传子）
最新发布
码农研究僧的博客
05-17 1万+
在 Vue 3 中，父组件可以通过 props 向子组件传递数据 子组件通过 defineProps 或 props 来定义它接收的属性 这些属性在子组件中可以直接使用
vue3 父组件使用ref获取获取子组件的属性方法
Kratial的博客
11-16 1363
2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名(的组件，想要让父组件访问到它的属性和方法需要借助与。写法会导致父组件无法访问到子组件中的属性和方法。这种方式，父组件可以正常获取到里面的属性和方法。此时父组件可以获取到子组件的count属性。来指定需要暴露给父组件的属性。
Vue3---通过 ref 获取子组件实例(子组件中的DOM结构、数据、及方法)
web15870359587的博客
03-06 1692
Vue3中，如果要在父组件拿到子组件(子组件的DOM结构、数据、方法)，可以通过 ref。即在父组件中定义响应式数据 ref(null) ，并绑定给子组件，在需要的时候，通过定义的响应式变量即可获取。获取后，即获取了子组件的一切，可以看到子组件的DOM结构，也可以看到子组件中对外暴露的的数据和方法，并且可以直接调用。 官方API[这里是图片001]https://v3.cn.vuejs.org/guide/component-template-refs.html#%E6%A8%A1%E6%9D%BF%E5%
使用vue3的时候父组件向子组件传值，子组件改变数据，父组件无响应
cz2378862893的博客
06-22 3078
vue3中reactive定义的引用类型直接赋值导致数据失去响应式
Vite2+Vue3学习笔记（五）：自定义组件并实现父子组件响应式传参
YGいくこさん的博客
11-27 3845
新手小白Vue3学习笔记第五篇，自定义组件并使用provide/inject传递响应式更新的数据。
Vue 父子组件的数据传递、修改和更新方法
08-27
在Vue.js框架中，父子组件之间的数据交互是关键部分，涉及到数据传递、修改和更新。以下将详细解析四种主要的方法： 1. **父组件修改子组件的data并实时更新** 在Vue中，父组件不能直接修改子组件的`data`属性。...
vue 进阶之实现父子组件间的传值
10-17
在Vue中，父子组件之间的通信主要通过props（属性）从父组件向子组件单向传递数据，以及通过事件（events）从子组件向父组件传递数据。 首先，我们来看一个简单的例子。在这个例子中，我们创建了一个名为`counter`...
vuejs父子组件之间数据交互详解
10-19
在 Vue 应用中，组件是可重用和可组合的基本单元，而父子组件之间的数据交互是常见的需求。在 Vue 中，这种交互遵循“props down, events up”原则，即数据由父组件通过 props 下传给子组件，子组件通过 $emit 触发...
3 Vue（处理数据 ）vue+父子组件+vueX+axios
lzyPM的博客
08-11 291
计算属性（computed）：处理data数据，与data用处一致 computed与methods不同点 computed methods vue对象中代码写法 一致 一致 HTML代码写法 不用写小括号 用写小括号 代码执行次数 一次 调用几次执行几次 属性 get属性 set方法+get属性 //HTML 和data一样 //vue computed:{ 属性名 ： function(){ return 计算后的数值 } } 过滤器（filters）：拼接data数据
vue3组件传值 reactive赋值响应式失效问题
A_Brave的博客
11-20 3933
vue3 reactive重新赋值响应式失效问题
Vue3 父子组件之间传值用法
weixin_45842460的博客
08-24 574
父传子 父组件 <template> <demo :name="goodname" :person="personList" /> </template> <script> import { ref, reactive } from "vue"; import demo from "./components/demo.vue"; export default { components: { demo, }, setup(props
[Vue3]父子组件相互传值数据同步
Supposelll的博客
02-04 2408
父传子：`defineProps`、`defineEmits` 子传父：`defineExpose` 双向绑定：`v-bind`
vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）
热门推荐
技术前端，忠于热爱 @回忆哆啦没有A梦
04-11 2万+
vue3 组件间通信方式（包括父子、爷孙、兄弟、全局），最全面的组件通信方式。
Vue中监听vuex数据变化（a组件修改vuex内数据，b组件内触发相应函数）
sinat_42684420的博客
03-12 9247
写了一个新闻类的小网站，客户提出的要求，必须使用导航栏。 因为新闻分类太多，我最初的想法是做成一个类似掌阅官网的导航模式。在index组件内渲染分类导航。 这样的话，就不用在home组件内头部渲染导航条。 但是，根据种种原因，必须设计成home组件头部使用导航的形式。 一开始，我是不太想要使用vuex的。但是经过了小半天的踩坑，一直没有做到自己想要的结果。最后还是选择了使用vuex。 在安装v...
vue的公共组件改变值 触发其他组件或.vue页面监听刷新页面
weixin_44279016的博客
04-02 1903
借鉴地址 业务场景重现 现在我的App.vue里面有一个头部的公共组件，头部组件里有一个输入框，当我输入词条时，将词条传进App.vue里的里的.vue页面，并进行查询获取数据 解决思路如下： 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的，当词条改变时，修改数据仓库里的词条 然后在.vue页面里监听这个词条，当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from 'vue'; import Vu
vue3 父子传参 数据失去响应式
10-13
在 Vue3 中，如果父组件传递给子组件的数据是响应式的，但是在子组件中修改该数据后，数据却失去了响应式，这可能是因为在子组件中直接修改了父组件传递的数据，而不是通过 emit 事件通知父组件进行修改。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值