12：vue3 组件事件（子传父 ）

1、触发与监听事件（子传父this.$emit）

Parent.vue

<template>
    <h3>Parent父组件</h3>
    <Child @parentEvent="parentEventHandle"></Child>
    <p>子组件传递的数据：{{ message }}</p>
    <p>userInfo:{{ userInfo }}</p>
    <p>name={{ name }}, age={{ age }}</p>
</template>

<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            message:"",
            userInfo:"",
            name:"",
            age:0
        }
    },
    components:{
        Child
    },
    methods: {
        parentEventHandle(data1,data2){
            this.message=data1;
            this.userInfo=data2;
            this.name=data2.name;
            this.age=data2.age;
        } 
    }
}
</script>

child.vue

<template>
    <h3>Child子组件</h3>
    <button @click="clickEventHandle">传递数据到父组件</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"child数据",
            userInfo:{
                name:"amy",
                age:20
            }
        }
    },
    methods:{
        clickEventHandle(){
            this.$emit("parentEvent",this.msg,this.userInfo)
        }
    }
}
</script>

2、组件事件配合 v-model 使用

Parent.vue

<template>
    <h3>Parent父组件</h3>
    <Child @parentEvent="parentEventHandle"></Child>
    <p>父组件显示搜索结果：{{ searchValue }}</p>
</template>

<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            searchValue:""
        }
    },
    components:{
        Child
    },
    methods: {
        parentEventHandle(data){
            this.searchValue=data;
        } 
    }
}
</script>

Child.vue

<template>
    <h3>Child子组件</h3>
    <input type="text" v-model="searchKey"/>
</template>

<script>
export default{
    data(){
        return{
            searchKey:""
        }
    },
　　  //侦听器
   watch:{
    searchKey(newValue,oldValue){
        this.$emit("parentEvent",newValue);
    }  
   }
}
</script>

3、通过函数使用Props实现子传父

<template>
    <h3>Parent父组件</h3>
    <Child title="父元素传递的值" :onEvent="dataFn"></Child>
    <p>父组件显示：{{ message }}</p>
</template>

<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            message:""
        }
    },
    components:{
        Child
    },
    methods: {
        dataFn(data){
            this.message=data;
        } 
    }
}
</script>

<template>
    <h3>Child子组件</h3>
    <p>子组件显示：{{ title }}</p>
    <p>{{ onEvent("来自子元素传递的数据") }}</p>
</template>

<script>
export default{
    data(){
        return{
           
        }
    },
    props:{
        title:String,
        onEvent:Function
    }
}
</script>