vue父组件通过ref获取子组件的值

**父组件通过ref获取子组件的值**

    1.在父组件中挂载的子组件上通过ref绑定,再通过refs就可以获取子元素的值啦

***父组件***

<template>
    <div class="app">
        <child ref="msgFormSon" ></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            data:""
        }
    },
    mounted:{
        this.getsun()
    },
    methods:{
        getsun(){
           this.data=this.$refs["msgFormSon"].sunData  //变量

　　　　　　　this.data=this.$refs["msgFormSon"].initdata()//方法

　　　　　　　　console.log(this.data)
 　　　　} 
　　}
 } 
</script>

 

***子组件***

<template>  
   <div class="app">
    {{sunData}}
   </div>
</template>
<script>
export default {
    data () {
        return {
            sunData:"this is zhangsan"
        }
    },
　　methods:{
　　　　initdata(){
　　　　　　console.log("额呵呵")
　　　　}
　　}

}
<script>