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值作为计算属性,这不是就完美的监听了子组件值的变化了嘛!!!有了以上的几种方法,感觉可以在组件之间任意穿梭了

原文地址:https://www.cnblogs.com/fqh123/p/11184987.html

时间: 2024-10-03 22:47:25

vue中父组件如何监听子组件值的变化的相关文章

Qt Gui中父控件监听子控件的IO事件

父对象重新定义自己继承自QObject的函数bool eventFilter(QObject* watched, QEvent* event). 子控件安装父对象的eventFilter: 例如, QTableView * itsView = new QTableView; itsView->viewport()->installEventFilter(this); Qt Gui中父控件监听子控件的IO事件

vue 父组件监听子组件生命周期

1.方法一 使用$on和$emit // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 2.使用hook // Parent.vue <Child @hook:mounted="doSomething" ></Child> doSomething() { console.l

vue2.x 父组件监听子组件事件并传回信息

利用vm.$emit 1.在父组件中引用子组件 <child @from-child-msg="listenChildMsg"></child > 2.子组件中使用$emit发送事件 this.$emit('from-child-msg', '这是子组件传递的消息');

jquery实时监听某输入框值的变化

$('#password').bind('input propertychange', function() { // 密码检验 var password = $("#password").val(); if(!passwordFilter(password)){ return false; } });

VUE中父组件向子组件传递数据 props使用

VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent"> <ul> <li v-for="item in fatherdatas">{{item}}</li> <!--父组件可以访问它自己的数据--> </ul> <child-component></chi

vue中 关于$emit的用法(父子组件传值)

1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template>      <div class="train-city">        <h3>父组件传给子组件的toCity:{{sendData}}</h3>

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue 如何在循环中 &quot;监听&quot; 的绑定v-model数据

vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. 监听对象的变化 3. 监听对象中具体属性值的变化 4. vue 如何在循环中 "监听" 的绑定v-model数据 回到顶部 1.普通属性的值进行监听 vue中提供了一个watch方法,它用于观察vue实列上的数据变动,来响应数据的变化. 下面我们来分别学习下使用watch对对象的属性值进行

如何为JOPtionPane的showConfirmDialog对话框中的按钮设置监听

最近刚学了java图形界面编程,想独立写个记事本,过程当中想要为对话框中的按钮设置监听,但是查看了一下api也没找到相应的方法,只找到这个: Returns: an integer indicating the option selected by the user showConfirmDialog这个方法只返回一个int值来标识用户选择了哪一个按钮.找了半天也没找到设置监听的方法..... 就在这时.....灵光一闪~~~~ 很多方法在正常情况下是返回0的,非正常情况返回-1. 于是我就用如