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中父组件如何监听子组件值的变化的更多相关文章
- 怎样监听xhr.readyState值的变化
可以使用 xhr.onreadystatechange 属性指向的函数去监听 xhr.readyState 值的变化. 示例如下: var xhr = new XMLHttpRequest(); xh ...
- React和Vue中,是如何监听变量变化的
React 中事件监听 本地调试React代码的方法 先将React代码下载到本地,进入项目文件夹后yarn build 利用create-react-app创建一个自己的项目 把react源码和自己 ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
- vue2.x 父组件监听子组件事件并传回信息
利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组 ...
- vue中.sync修饰符,实现子组件实时更新父组件的值
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...
- vue watch 可以监听子组件props里面属性的改变
子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- Vue中使用watch来监听数据变化
写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...
- 【Angular】父组件监听子组件事件(传参)
Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目
随机推荐
- mysql中的锁机制之概念篇
锁的概念 ①.锁,在现实生活中是为我们想要隐藏于外界所使用的一种工具. ②.在计算机中,是协调多个进程或线程并发访问某一资源的一种机制. ③.在数据库当中,除了传统的计算资源(CPU.RAM.I/O等 ...
- 笔记 - C#从头开始构建编译器 - 3
视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-03.md 作者是 Immo Landwerth(https:// ...
- .NetCore如何使用ImageSharp进行图片的生成
ImageSharp是对NetCore平台扩展的一个图像处理方案,以往网上的案例多以生成文字及画出简单图形.验证码等方式进行探讨和实践. 今天我分享一下所在公司项目的实际应用案例,导出微信二维码图片, ...
- json其实就是一种数据格式
1.json的两种书写: 2.字符串转换为json格式:
- JoinableQueue类与线程
生产者消费者的问题及其解决办法 问题 在之前的生产者消费者模型中,生产者和消费者只有一个, 那么生产者往队列里put几次,消费者就get几次,但是存在一个问题, 生产者不一定只有一个,消费者也不一定只 ...
- vue去哪儿网项目环境配置
一.首先安装node.js 根据自己的(windows或mac)系统进行安装node,在开发环境中一般安装LTS版本.安装成功后,在终端输入"node -v"和"npm ...
- python数据写入Excel表格
from openpyxl import Workbook def main(): sheet_name = "表名1" row_count = 6 # 行数 info_resul ...
- 【Distributed】分布式配置中心
一.概述 1.1 什么是分布式配置中心 常用分布式配置中心框架 二.Apollo阿波罗 2.1 Apollo特点 2.2 Apollo整体架构原理 2.3 Apollo Portol 环境搭建 Lin ...
- Computer Vision_33_SIFT:Evaluation of Interest Point Detectors——2000
此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...
- 【前端】低版本IE浏览器访问网站一片空白
最近在客户那里,发现一个奇葩的问题,系统上IE浏览器访问网站一片空白,显示无法访问. 但是相同的网站系统,在我们的电脑上又可以访问且IE浏览器版本相同,没法只有,装虚拟模拟客户环境复现一下了. 发现在 ...