vue 中的provide和inject【跨组件传值】

前言：

vue 中的父子组件传值：

vue 中的父子传值使用过：prop和$emit的组合。 来实现父子传值；

• 如果跨组件传值，还要使用prop的话，是不麻烦，在这里除了vuex，接下来，给大家说一下，除了vuex ，也可以实现跨组件传值。

provide

• 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject

• 一个字符串数组，或
• 一个对象点击这里

基本的使用方法：

// 祖先组件 提供foo
//第一种
export default {
    
    
  name: "grandfather",
  provide(){
    
    
    return{
    
    
      foo:'halo'
    }
  },
}
//第二种
export default {
    
    
  name: "grandfather",
  provide:{
    
    
    foo:'halo~~~~'
  },
}

//后代组件 注入foo
export default {
    
    
  inject:['foo'],
}

• 上面两种的区别:
• 如果你只是传一个字符串，像上面的‘halo’，那么是没有区别的，后代都能读到。
  如果你需要传一个对象（如下所示代码），那么第二种是传不了的，后代组件拿不到数据。所以建议只写第一种

//当你传递对象给后代时
provide(){
    
    
    return{
    
    
      test:this.msg
    }
  },

注意：一旦注入了某个数据，比如上面示例中的 foo，那这个组件中就不能再声明 foo 这个数据了，因为它已经被父级占有。

实现全局变量

• 全局变量？provide/inject不是只能从祖先传递给后代吗？没错，我们只要绑定到最最顶层的组件即可。

//app.vue
export default {
    
    
  name: 'App',
  provide(){
    
    
    return{
    
    
      app:this
    }
  },
  data(){
    
    
    return{
    
    
      text:"it's hard to tell the night time from the day"
    }
  },
  methods:{
    
    
    say(){
    
    
      console.log("Desperado, why don't you come to your senses?")
    }
  }
}

//其他所有子组件，需要全局变量的，只需要按需注入app即可
export default {
    
    
  inject:['foo','app'],
  mounted(){
    
    
    console.log(this.app.text);//获取app中的变量
    this.app.say();//可以执行app中的方法，变身为全局方法！
  }
}