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接受）

provide 提供变量：Object | () => Object
inject 注入变量： Array | { [key: string]: string | Symbol | Object }

provide 选项应该是一个对象或返回一个对象的函数。
该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。

inject 选项可以是

一个字符串数组
一个对象，key为本地绑定名，value为：
在可用的注入内容中搜索用的key，或
一个对象，其 from 属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value
提示：provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。

<template>
  <div>
    <p>{{ title }}</p>
    <template-b></template-b>
  </div>
</template>
<script>
  import TemplateB from "./TemplateB"
  export default {
    name: 'TemplateA',
    components: { TemplateB },
    // provide选项提供变量
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

TemplateB.vue

<template>
  <div>
    <p>{{ title }}</p>
    <template-c></template-c>
  </div>
</template>
<script>
import TemplateC from "./TemplateC "
export default {
  name: "TemplateB",
  components: { TemplateC },
  data () {
    return {
      title: '子组件'
    }
  },
};
</script>

TemplateC.vue
在孙组件中，使用inject来注入

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "TemplateC",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

结果孙组件页面显示：

message: provided by father