vue子组件向传父组件传值

Posted 2022-03-12 hajar

子组件：

<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>