ref 与 parent / children通信

ref调用子组件方法并传参

在父组件代码中，通过在子组件上标签上设置属性ref，可在this.$ref中获取到子组件对象，以此调用子组件内的变量和方法，触发子组件的变化

父过ref调用子组件

父组件代码

<!-- 父组件 -->
<template>
    <div class="family">
        <div @click="father_methods">
            <div>父组件的本地参数:{{father_string}}</div>
            <button @click="change_son">ref获取子组件实例并触发其函数</button>
        </div>
        <!-- 子组件 -->
        <Son ref="child1"></Son>
        <!-- 子组件 -->
    </div>
</template>

<script>
import Son from "./Son";
export default {
    name: "HelloWorld",

    data () {
        return {
            father_string: "father_string",
        };
    },
    components: {
        Son,
    },
    methods: {
        //父组件方法
        father_methods (str) {
            this.father_string = str
        },
        //change_son调用子组件内部方法和参数
        change_son () {
            this.$refs.child1.son_methods('changed_from_father')
        }
    }
};
</script>

子组件代码

<!-- 子组件 -->
<template>
    <div>
        <div>子组件的本地参数{{son_string}}</div>
    </div>
</template>

<script>
export default {
    name: "Son",
    data () {
        return {
            son_string: "son_string"
        }
    },
    methods: {
        /* 这个方法到时候供父组件调用 */
        son_methods (str) {
            this.son_string = str
        }
    }
};
</script>

ref调用效果

点击父组件的button，触发change_son，触发子组件的方法son_methods并且传递传递参数给子组件，如图子组件的参数改变

Vue2中，在父组件中通过this.$children和this.$refs调用的效果没有太大差别值得注意的是Vue3移除了this中的$children属性

我们来看看子组件中调用$parent的效果，在子组件mounted周期中查看$parent

<script>
export default {
    /* 子组件 */
    name: "Son",
    data () {
        return {
            son_string: "son_string"
        }
    },
    methods: {
        /* 这个方法到时候供父组件调用 */
        son_methods (str) {
            this.son_string = str
        }
    },
    mounted () {
        //打印看看父组件实例
         console.log(this.$parent)
    }
};
</script>

后台打印我们可以看到对象里存放着父组件的变量和参数

子通过parent父方法

我们直接在子组件mounted生命中期中调用父组件的方法并且传递参数

 mounted () {
         /* 子组件的mounted */
        this.$parent.father_methods('changed_by_son')
 }

图中左侧，父组件的参数确实被子组件修改了

总结

通过ref 与 $parent /$ children 可以简单快捷的拿到父子组件实例并访问，调用其方法和参数，根据实际情况，配合其他通信方法可优雅高效，愉快地开发~

Vue 父子组件通信 ref 与 $parent / $children