provide和inject使用場景也是組件傳值，尤其是祖父組件--孫組件等有跨度的組件間傳值，記住是單向的。孫組件不能向祖父組件傳值。

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

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

示例：

（1）祖父組件grandpaDom.vue：

<template>
  <div>
    <father-dom :fooNew=‘fooNew‘>
    </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>

效果：

vue provide和inject使用