vue的refs作用

一个包含 DOM 元素和组件实例的对象，通过模板引用注册。

警告

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

可以理解只能显式的获取关联的组件

主要问题

this. $refs.xx.fn 获取组件的实例的时候，提示this.$ refs为undifind，举例：

父组件：Father.vue

js
<template>
    <div>
        <button  @click="showChild()">点击</button>
        <child ref="Child" :childVsible="childVsible"/>
    </div>
</template>
<script>
    import child from './Child';
    export default {
        components: { child },
        data() {
            return {
                 childVsible: false,  //默认隐藏子组件
            }
        },
        methods:{
            showChild(){
                this.childVsible = true;
                this.$refs.test();
            }
        }
</script>

子组件：Child.vue

js
<template>
    <div ref="Child">
        <div>我是你爸爸</div>
    </div>
</template>
<script>
    import child from './Child';
    export default {
        
        methods:{
            test(){
                console.log("我才是你爸爸！！")
            }
        }
</script>

这个时候点击点击按钮会提示undefind，为什么呢?应该是refs还没加载出来，所以取不到（待确认），这时候加一个$nextTick即可解决问题，修改父组件的showChild方法

js
 methods:{
    showChild(){
        this.childVsible = true;
        this.$nextTick(() => {
             this.$refs.test();
      });
    }
}

目录

vue的refs作用

主要问题