vue中provide 和 inject 的使用

在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们使用的时候必须是成对出现的，用于父级组件提供数据，任何父组件的下级都可以拿到父组件中的数据。

父组件中通过provider来提供变量，然后在子组件中通过inject来调用父组件provide 中的变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

 
Vue.component('child',{
      inject:['obj'],//得到父组件传递过来的数据
      data(){
        return {
          msg:this.obj
        }
      },
     template:`
        <div>
         <input v-model="msg">
       </div>
   })

   Vue.component('parent',{
     template:`
       <div>
         <p>父组件中的数据!</p>
         <child></child>
       </div>
     `,
     provide:{
       obj:'父组件中的数据!'
     },
     data(){
       return {
         message:'hello'
       }
     }
   })