浅谈provide与inject

在vue中有很多方法可以实现组件之间的传值，其中provide与inject也是组件传值的一种。

provide与inject的传值与props类似，前者可以给后代组件传值，而props是只能给子组件传值。

举个例子：
前提：a组件里调用了b组件，同时b组件里调用了c组件
区别：
a组件可以用props方法直接传数据给b组件，但不能传数据给c组件
a组件可以用 provide与inject 方法直接传递数据给b组件，也可以直接给c组件传值

具体的用法

a组件：

<template>
  <div>
    a组件
    <bbb />
  </div>
</template>
<script>
import bbb from './bbb'
export default {
  provide() {
    return {
      msg: this.msg
    }
  },
  components: {
    bbb
  },
  data() {
    return {
      msg: 'a组件的数据'
    }
  }
}
</script>

b组件：

<template>
  <div>
    b组件
    b---{{ msg }}
    <ccc />
  </div>
</template>
<script>
import ccc from './ccc'
export default {
  inject: ['msg'],
  components: {
    ccc
  }
}
</script>

c组件：

<template>
  <div>
    c组件
    c---{{ msg }}
  </div>
</template>
<script>
export default {
  inject: ['msg']
}
</script>

效果展示：

但有一点要注意：是用provide与inject方法传值，如果值修改后面组件的值是不会跟着变得，也就是说值不会响应
也就是说：如果把a组件中的msg改了，b组件，c组件接收到的msg还是以前的数据，并不会变
那么问题来了 如果想要响应式的效果怎么办呢
直接把传的数据变成复杂类型的数据就行了
例如传一个对象

<template>
  <div>
    a组件
    <bbb />
  </div>
</template>
<script>
import bbb from './bbb'
export default {
  provide() {
    return {
      msg: this.passdata
    }
  },
  components: {
    bbb
  },
  data() {
    return {
      passdata: {
      	msg: 'a组件的数据'
      }
    }
  }
}
</script>

这样我们就可以的到一个可以响应的数据，如果想改变直接this.passdata.msg去修改