vue 元件開發相關知識點

元件通信

父子

props

$refs

$children (無法保證順序)

子父

$emit

@XX

兄弟

$parent

$root

祖代後代 （一般用于元件庫開發

參考–Vue 依賴注入 - Provide/Inject

provide

inject

無關系元件通信

$bus

Vuex

插槽

匿名插槽

具名插槽

作用域插槽 (将子元件插槽值傳給父元件)

（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