Vue组件通信的方式有哪些？

props - emit

• 父传子：props
• 子传父：emit

$attrs -$listeners

• Vue3移除了$listeners(将其合并到了$attrs)
• $attrs作为props和emits的候补，可以获取未接收的方法和属性
• 可以通过v-bind="$attrs"透传所有属性和方法至下一级
• 其本质上还是父子传递，且依赖v-bind实现透传

$parent -$refs

• 使用this.$parent可以获取到父组件，且可以获取出其定义的数据
• 使用this.$refs可以获取到子组件，且可以获取出其定义的数据

provide - inject

• provide和inject可以跨组件通信（上下层级）
• provide传递静态数据

//父级
export default{
    name:'test',
    data() {
        return {
            name:'kang'
        }
    },
    provide:{
        info:'hello world'
    }
}


// 子级
export default{
    name:'testChild',
    inject:['info']
}

• provide传递动态数据

export default{
    name:'test',
    data() {
        return {
            name:'kang'
        }
    },
    provide:{
        info:computed(()=> this.name)
    }
}

// 子级
export default{
    name:'testChild',
    inject:['info']
}

自定义事件

• eventbus等

Vuex