provide和inject大家点到为止，滥用者耗子尾汁！

在三大框架盛行的当下，前端从业者或多或少已经掌握了至少一种，但，无论是react，还是vue或是angular，都有一个共同的特点，那就是组件化，说到组件化，就离不开组件的之间的数据传递。

转眼已经做了两年的vue开发了，组件之间的数据传递已经用的快成仙了，什么props，什么$emit(),这都是老生常谈的了，今天我们来聊聊更劲爆的Provide。上代码：

<template>
  <div>
    <childCom></childCom>
  </div>
</template>
<script>
import childCom from './childHelloWorld.vue';
export default {
  data () {
    return {
      arr: [ 1, 2, 3, 4, 5, 6, 7, 8, 9,1,2,1,3 ],
       arrString:'我是父组件的变量！'
    }
  },
  name:'HelloWorld',
  components:{
    childCom
  },
  provide(){
    return {
      parentsData:this
    }
  }
}
</script>
<style scoped>
</style>

上方为父组件的代码，很简单，一个div包着一个子组件childCom，下方是childCom的代码：

<template>
    <div>{{parentsData.arrString}}</div>
</template>
<script>
/* eslint-disable */
export default {
  data () {
    return {
    }
  },
  inject:['parentsData'],
  name:'childCom',
  props: {
  },
  components: {},
  computed: {
  },
  watch: {
  },
  created () {
  },
  mounted () {
     console.log(this.parentsData); 
  },
  methods: {
  }
}
</script>
<style scoped>
</style>

看一下页面：

不用多说了，我没用props就将父组件的变量传入了子组件中，需要知道的是，不仅仅子组件可以使用，后代组件都可以使用。这个就是vue的原生api——provide，在provide中指定要传递给后代组件的数据，后代组件通过inject注入父组件传递过来的数据，便可轻轻松松的使用父组件的变量，大家看我传递的是父组件的this，那就是说，父组件的所有变量和方法在我的后代组件中都可以使用，但是前提是你需要使用inject去注入。

如此好用的一个数据传递方法为什么在现在的各个vue项目中很少看到呢，就是因为这个方法真的是太不好管控了，试想下，我在根组件provide了this，孙孙重孙组件去使用了this里面的一个变量，我能很容易的去找到这个变量的出处是哪吗？所以这个方法如果在项目中滥用的话，各个变量在追溯起来是很困难的，而且你并不知道，在你现在的那个组件使用了该变量，有没有在别的组件里也使用了，并对其进行改变，所以说，使用这个方法的前提一定要在组件和变量可控的情况下谨慎使用，而不是图方便，在项目中滥用，否则真的后悔莫及啊~~~

这里只是点到为止，大家耗子尾汁，能使用出什么花样的用法还需要自己慢慢去摸索。再会！