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)

}

}

}