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)

            }

    }

}