vue中父组件如何监听子组件值的变化

Posted 2022-04-13 fqh123

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