ref 与 parent/parent / parent/children通信

父组件通过ref向子组件传参并调用子组件方法

在父组件代码中，通过在子组件上标签上设置属性ref，可在this.$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 () {
            this.$refs.child1.son_methods('changed_from_father')
        }
    },
    mounted () {
        console.log();
    }
};
</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>
</script>


复制代码

简单实例效果如下

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

Vue2中，在父组件中通过this.children和this.children和this.children和this.ref调用的效果没有太大差别

值得注意的是Vue3移除了this中的$children属性

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

parent

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

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

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

 mounted () {
        this.$parent.father_methods('changed_by_son')
 }

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

总结

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