vue中父组件如何监听子组件值的变化
vue中我们会遇到很多父子组件通信的需求,
下面简单列一下,父子组件通信的几种情况
1:父组件向子组件传值:使用prop向子组件传值;
2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值;
3:父组件可以通过this.$refs.name.去访问子组件的值或方法;
4:子组件可以通过this.$parent.去访问父组件的值或方法;
总结了一下,感觉好像挺全面的,好像不缺啥了。。。。
但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响应呢????
研究了一下,需要借用vueX!!!!超级大无敌的vueX
上个例子:
先看子组件
<template> <div><el-button @click="dd()">自定义组件内的按钮</el-button> </div> </template> <script> import { mapGetters,mapActions } from 'vuex'; export default { watch:{ text:{ handler(newVal){ this.$store.dispatch('user/setText',newVal); }, immediate:true, } }, data(){ return { text:"自定义组件", } }, props:['propObj'],//外部传值 methods:{ ...mapActions([ 'setText' ]), dd(){ if(this.propObj.name==2){ this.propObj.name="哈哈"; this.text="自定义组件"; this.$emit('update:propObj', this.propObj) }else{ this.propObj.name=2; this.text="????????????????"; this.$emit('update:propObj', this.propObj) } } } } </script>
子组件中,点击按钮,会改变text的值,
我们用watch去监听,text值的变化,它如果变化了,就调用vueX中的actions方法,就是把vuex中的一个变量设置成text的值。
再来看看父组件中,只看computed即可:
<script> import { mapGetters } from 'vuex'; import Lala from '@/components/lala.vue'; export default { computed: { ...mapGetters(['childText' ]) }, } </script>
父组件中,将vueX中的一个getter值作为计算属性,这不是就完美的监听了子组件值的变化了嘛!!!有了以上的几种方法,感觉可以在组件之间任意穿梭了
分类:
vue
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」