vue-组件通信之provide/inject

vue–组件通信之provide/inject

一般父传子用的都是props
但是如果我们想要实现的是爷爷传给孙子，再去用props就比较麻烦了，中间还会经过爸爸。
所以我们可以使用provide/inject，孙子就可以直接用爷爷的东西啦，provide不关心去处，inject不关心来处。
写法也非常的简单，但是一定要注意存在爷孙关系。

爷爷的代码

provide(){
	return {
		name:"张三"
	}

}

孙子的代码

inject:["name"]  //注意一定是列表

按照上面的写法虽然能够将值传过去，但是并不是响应式的，如何能够让其响应式呢？传对象即可。

爷爷的代码

 provide(){
    return {
      obj:this.obj      //传入一个响应式对象
    }
  },
  data(){
    return {
      obj:{
        name:"张三"
      }
    }
  },
  onLoad(){
	  this.change()
  },
  methods:{
    change(){
      this.obj.name = "李四"
    }
  }

孙子的代码

//使用
{{obj.name}}
//接收响应式对象
inject:["obj"]    

</script>

代码007普通

打赏 收藏 海报 链接