vue 组件传值provide/inject

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
这种方式可以避免在使用props传值时，必须将每一个属性都传递给子组件的写法，当使用的公共组件不确定会被传递什么值的时候，使用这种写法非常方便。

//父组件示例
<template>
  <div>
    <childOne></childOne>
  </div>
</template>
<script>
  import childOne from '../components/test/ChildOne'
  export default {
    name: "Parent",
    provide: {      //重要一步，在父组件中注入一个变量
      for: "demo"
    },
    components:{
      childOne
    }
  }

//子组件示例，这个不管嵌套了多少层，都能请求到父组件中注册的变量
<template>
  <div>
      {{for}}
  </div>
</template>
<script>
  export default {
    name: "childOne",
    inject: ['for'],            //子孙组件中使用inject接住变量即可
  }
</script>