vue provide和inject使用

provide和inject使用場景也是組件傳值，尤其是祖父組件--孫組件等有跨度的組件間傳值，單向傳值（由provide的組件傳遞給inject的組件）。

provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。

inject 通常是一個字符串數組。

示例：

（1）祖父組件grandpaDom.vue：

<template>
  <div>
    <father-dom>
    </father-dom>
  </div>
</template>
<script> import fatherDom from "./fatherDom.vue"; export default { provide: { fooNew: "bar" }, data() { return {}; }, components: { fatherDom }, methods: {} }; </script>

（2）父親組件fatherDom.vue：

<template>
  <div>
    <child-dom></child-dom>
  </div>
</template>
<script> import childDom from "./childDom.vue"; export default { name: "father-dom", components: { childDom } }; </script>

（3）孫組件childDom.vue

<template>
  <div>
    <p>fooNew：{{fooNew}}</p>
  </div>
</template>
<script> export default { name: "childDom", inject: ["fooNew"], methods: {} }; </script>

效果：