【vue回顾系列】09-provide/inject的学习，链式信息传递

概念

provide/inject这是一个组件的链式通信，provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。

用inject的组件会不断向上找拥有provide的父组件，知道找到为止。

这个通信的方法可能做业务的时候用不到，但是去开发底层的一些通用组件就会用到。

使用

非响应式

一般是传基本类型时，父组件改变该传递的值了，子组件不会跟着改变。

父组件：

// 父级组件提供 dadMes
data() {
  return {
    str: '这是爸爸的信息',
  };
},
provide() {
  return {
    dadMes: this.str
  }
}

子组件：

// 子组件注入 dadMes
inject: ['dadMes'], // 传字符串可以简化使用
created () {
  console.log(this.dadMes) // => '这是爸爸的信息'
  this.dadMes = 'zzz' // 避免修改，虽然能改但是会报错提示
}

// 完整写法***************************

inject:{
    dadMes:{
        // from: 'dadMes', // 这样子就可以给注入的变量自定义名称了，防止冲突
        default:()=>({})
    }
}

以上写法要避免数据的修改，第一，父向子修改是非响应式；第二子向父修改是会报错的；

响应式

如果直接把整个组件传下去，就不会出现非响应式问题，但应该性能损耗也大。

父组件

provide() {
  return {
    dadDom: this // 整个组件
  }
},

子组件

// inject: ['dadDom']
inject:{
    dadDom:{
        default:()=>({})
    }
},
methods:{
    showStr(){
        console.log(this.dadDom.str)
        this.dadDom.str = '换成儿子了' // 可以修改
    }
}

如果不想传整个组件，可以通过计算属性指定data中的值：

provide(){
	return {
		info: computed(()=>{this.xxx}) // vue3写法
	}
}

与vuex的区别

Vuex 和 provide/inject 最大的区别在于，Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的，换句话说，你不知道是哪个组件修改了这个全局状态。

与props的区别

props如果嵌套的组件太多，容易形成强耦合

缺点

provide/inject 明显破坏了单向数据流原则。试想，如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。这一方面增加了耦合度，另一方面，使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。