provide/inject

provide / inject

在vue里面，组件通讯是重中之重。好的通讯方式无疑让代码更加简洁优化，而provide / inject就是组件通讯的一种,可以实现父子组件，或父组件和后代组件的通讯。

来看看官方的介绍：

provide

官方介绍：
provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为key，但是只在原生支持 Symbol和 Reflect.ownKeys的环境下可工作。

provide在父组件使用，使用时和data等属性平级使用。它负责提供需要传递的数据，只能为一个对象或者一个返回对象的函数。

• 当传递的数据是新建的数据的时候（第一次出现），可以直接使用对象传递，也可以使用函数。
• 当传递的数据是data或props等属性里面的数据的时候，必须使用函数形式进行传递。（推荐一直使用函数传递）

export default {
  name: "App",
  components: {
    Parent
  },
  data() {
    return {
      user: {
        name: 'fufu',
        age: 20
      },
      love: ['sleep', 'eat']
    }
  },
  provide() {
    return {
    user: this.user,
    love: this.love,
    skill: 'css, html, js'
  }
  }
  // 直接新建值传递可以使用对象
  // provide: {
  //   user: {name: 'fufu'},
  //   love: ['sleep', 'eat']
  // }
}

inject

inject出现在子组件或者后代组件里，负责将接收到数据注入到这个vue实例里面。一般来说它直接为一个字符串数组，里面的字符串元素表示注入的数据。

inject 当它为一个对象的时候，还有一些其他用法。

• 在 Vue 2.5.0或更高版本时注入时，可以通过设置默认值使其变成可选项，尽管父组件没有提供数据但是依旧可以使用默认值。(默认值为非原始数据时，需使用函数返回，同props)
• 我们可能还会经常遇到注入的数据名与当前组件名冲突的情况，使用from可以更改注入的数据名称。
• 并且，在Vue 2.2.1或更高版本时，可以直接使用注入的值给data或props值赋初始值。

export default {
  name: 'Son',
  components: {
    Son
  },
  // inject 可以为一个字符串数组
  // inject: ['user', 'love', 'skill']
  inject: {
    other: {
      // 设置默认值（如果默认值为非原始值，则需要使用函数返回，同props）
      default: '默认数据'
    },
    // 新建skills注入值，数据来源于skill
    skills: {
      from: 'skill'
    },
    user: {},
    love: {}
  },
  data() {
    return {
      myUser: this.user
    }
  },
  created() {
    console.log(this.user, this.love, this.skills, 'inject数据');
  }
}

provide/inject并不是响应式的，但是如果提供的数据原本就是响应式，那么注入进的数据也是响应式的。