vue 组件开发相关知识点--组件通信及插槽

组件通信

父子

• props
• $refs
• $children (无法保证顺序)

子父

• $emit
• @XX

兄弟

• $parent
• $root

祖代后代 （一般用于组件库开发

参考--Vue 依赖注入 - Provide/Inject

• provide
• inject

没关系

• $bus
• Vuex

插槽

匿名插槽

<slot>  -->  <template>XX</template>

具名插槽

<slot name="test">  -->  <template v-slot="test">XX</template>

作用域插槽 (将子组件插槽值传给父组件)

<slot name="test" :value="1">  -->  <template v-slot:test="slotProps">{{slotProps.value}}</template>

（value是子组件要传的值 父组件用slotProps接受）