24-子给父传值

一、子组件给父组件传值
通过在子组件向外抛出一个事件和参数，然后父组件执行这个事件接收参数

子组件：

<template>
    <div>
        <h1 @click="run">{{message}}</h1>
    </div>
</template>
<script>
export default {
    name:"Child",
    props:["message"],
    data(){
        return{
            msg:"子组件的值"  //将msg传递给父组件
        }
    },
    methods:{
        run(){
     //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
            this.$emit("func",this.msg)
        }
    }
}
</script>

子组件通过this.$emit()的方式将值传递给父组件

注意：这里的func是父组件中绑定的函数名

父组件：

<template>
    <div>
        <Child @func="getParentMsg"></Child>
        {{parentMsg}}
    </div>
</template>
<script>
import Child from '../common/Child.vue'
export default {
    name:"parent",
    components:{
        Child
    },
    data(){
        return{
            parentMsg:""  
        }
    },
    methods:{
        getParentMsg(data){
           this.parentMsg = data;
        }
    }
}
</script>

https://blog.csdn.net/weixin_38888773/article/details/81902789