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>