11.Vue3.x组件自定义事件 以及mitt 实现非父子组件传值

一、组件自定义事件实现子组件给父组件传值

注意：Vue官方推荐始终使用kebab-case(短横线隔开式)给自定义事件命名

Vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）

在vue官网上有这样的一句话：
“camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相>对应的 kebab-case (短横线隔开式) 命名： 如果你使用字符串模版，则没有这些限制。”

子组件Header.vue

<template>
    <h2>
        头部组件---
        <button @click="sendParent">执行父组件的自定义事件</button>
    </h2>
</template>

<script>
    export default {
    
        name: "",
        data() {
    
            return {
    
                msg:"头部组件"
            }
        },
        methods: {
    
            sendParent(){
    
                console.log("触发自己的方法~！");
                // 触发父组件的自定义事件,并传值
                this.$emit("send",this.msg);
            }
        }
    }
</script>

<style scoped>
    h2{
    
        text-align: center;
        background: #000000;
        color:#fff;
    }
</style>

父组件Home.vue

<template>
    <v-header @send="getChild"></v-header>
    <br>
    首页父组件
</template>

<script>
    import Header from "@/components/Header";
    export default {
    
        name: "",
        data() {
    
            return {
    
                title:"首页组件"
            }
        },
        components:{
    
            "v-header":Header,
        },
        methods: {
    
            getChild(val){
    
                console.log("我是父组件的方法");
                // 接收子组件传递的参数
                console.