vue $refs 父组件向子组件传值

在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象。

在父组件中引入子组件，在子组件上添加 ref="命名"

在父组件的方法中可以通过 this.$refs.命名 修改子组件的data值或调用子组件的方法。

例如：

<template>
 <Child ref="child"></Child>
</template>

<script>
	export default {
	    name: "Parent",
	    data () {
	        return {
	        }
	    },
        mounted() {
            this.$nextTick(() => {
                this.$refs.child.childflag = true;
            }
        }
 	    methods: {
            this.$nextTick(() => {
                // 父组件调用子组件方法
    	        this.$refs.child.childMethod(); 
                // 父组件赋值子组件的数据
                this.$refs.child.childflag = false;    
            }
            
	    }
	}
</script>

注意：

可能会出现this.$refs 获取不到值的问题，原因有：

1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{  }) 这里面实现，要不然找不到ref，原因是mouned()之前，BOM节点还没有完全挂载上，于是找不到定义的ref。

2、可以直接在updata()的生命周期函数中使用，不用写this.$nextTick(()=>{  }) 。

3、在methods:{  } 方法中使用，也需要使用this.$nextTick(()=>{  } ) 等到页面完全渲染完毕之后在调用即可。

4、组件在v-if为false的父节点下，导致这个子组件未渲染，也是导致获取不到的因素。