Vue的ref，父节点，获取子节点数据的一个手段

Vue 语法当中有一个 ref的参数，现在就就介绍一下使用方式，它的目的就是父节点，获取子节点数据的一个手段

 

首先我们这里有一个父节点father.vue，在这里我们定义了一个子节点child.vue，并且由父节点定义一个ref为childDatas，父节点需要获取子节点的值，就可以直接通过this.$refs.childDatas里面获取，换句话说，这个childDatas其实就是等于child.vue里面的data()信息,包括里面的方法, 所以当按钮点击的时候，执行test()函数就会从child.vue里面的data()里面获取message的参数，这里会打印333, 所以当你获取一些data()里面没有的参数，自然就会是undefine了

<template>
    <div>
        <!--测试效果的按钮-->
        <button @click="test()">Test Ref</button>

        <!--子节点-->
        <Children ref="childDatas"></Children>
    </div>


</template>

<script>
    import Child from './child.vue'
    export default{
        methods:{
            test(){
                var test = this.$refs.childDatas.message
                console.log(test)
            }
        },
        components:{
          Children:Child
        }
    }


        

 

child.vue

<template>
    <div>I am Children</div>
</template>

<script>
    export default{
        data(){
            return{
                message:'333'
            }
        }
    }
</script>