vue子組件向傳父組件傳值

子組件：

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="給父組件傳遞值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //將msg傳遞給父組件
            msg: "我是子組件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父組件指定的傳數據綁定的函數，this.msg:子組件給父組件傳遞的數據
             this.$emit('func',this.msg)
         }
     }
}
</script>

子組件通過this.$emit()的方式將值傳遞給父組件

注意：這里的func是父組件中綁定的函數名

父組件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>