vue中inject和provide的基本使用

inject和provide需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

以上是官方文档的定义，其实inject和provide是一种组件传参方式，它有自己独特的使用场景，当子组件调用父组件的data或者methods时，通过$parent这个API获取到，父子组件两级的情况下可以这么做，如果组件层级非常深，组件层级有N级的话，那就$parent.$parent.....，代码会非常累赘，所以才有了inject和provide。

需要注意的是：inject和provide 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

provide

provide是父级组件需要传递给子孙组件的属性/方法。选项有以下几种：

• 一个对象。
• 返回一个对象的函数。

//选项一
provide: {
  content: 'hello world'
}

//选项二
provide(){
  return {
    content: 'hello world'
  }
}

inject

inject是子孙组件用来接收父级组件属性/方法。选项有以下几种：

• 一个字符串数组。
• 一个对象，对象的key是本地的绑定名，value是provide定义的名字。
• 一个对象，区分上一种方式是为了设置默认值。对象的key是本地的绑定名，value也是一个对象。该对象有两个键，一个是from（provide定义的名字），另一个是default（默认值）。

//选项一
inject: ['content']

//选项二
inject: {
  content: 'content'
}

//选项三
inject: {
  content: {
    from:'content',
    default:'hello world'
  }
}

完整示例

父级组件

<script>
import Son from "@/components/Son.vue";
export default {
  name: "Parent",
  components: { Son },
  provide() {
    return {
      foo: this.foo,
      content: this.content
    }
  },
  data() {
    return {
      content: 'hello world'
    }
  },
  methods: {
    foo() {
      console.log("我是父组件")
    }
  }
};
</script>

子孙组件

<script>
export default {
  name: "Son",
  inject: ['content','foo'],
  created() {
    this.foo();
  }
};
</script>