Vue3学习笔记—Provide和Inject的用法和原理

父子组件传递数据时，通常会用到props和emit。先传给子组件，再传给孙子组件。如果使用多个子组件或者多个孙子组件，需要多次传递，会很麻烦。在这种情况下，可以使用provide和inject来解决这个问题。无论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据。父组件使用provide提供数据，子组件或孙组件注入。数据。同时，兄弟组件之间传值也更加方便。1、Vue2的provide/inject使用provide：它是一个对象，包含属性和值。例如：provide:{info:"value"}如果provide需要使用data中的数据，这样写会报错。在访问组件实例属性时，provide需要转换为返回对象的函数。provide(){return{info:this.msg}}inject：是一个字符串数组。例如：inject:['info']接收上面provide提供的info数据，也可以是一个对象，包含from和default属性，from是可以在注入内容中进行搜索的key，而default属性就是指定默认值。vue2中项目/注入应用：//父组件exportdefault{provide:{info:"providedata"}}//子组件exportdefault{inject:['info'],mounted(){console.log("接收数据：",this.info)//接收数据：提供数据}}provide/inject类似于消息的订阅和发布。provide提供或发送数据，inject接收数据。2.Vue3的provide/inject用于组合API。提供/注入只能在设置期间调用。在使用它之前，必须从vue中导入provide/inject方法。provide函数接收两个参数：provide(name,value)name：定义提供的属性的名称。value：属性的值。使用时：import{provide}from"vue"exportdefault{setup(){provide('info',"value")}}inject函数有两个参数：inject(name,default)name：接收由提供的属性名提供。default：设置默认值，可以留空，可选参数。使用时：import{inject}from"vue"exportdefault{setup(){inject('info',"setdefaultvalue")}}完成示例1：provide/injectinstance//父组件代码//子组件代码3.添加响应要添加提供/注入的响应，请使用ref或reactive。完整示例2：provide/injectresponsive//父组件代码//InjectCom子组件代码中上面的例子，info的值会在父组件或子组件中被修改。Provide/inject类似于消息的订阅和发布。它遵循Vue中的单项数据流。这是什么意思？意思是数据在哪儿，修改只能在哪儿。在数据传输点不能修改数据，容易造成状态不可预测。在订阅组件中修改值时，可以正常修改。如果其他组件也使用了该值，状态很可能会造成混乱，所以要从源头上避免问题。readonly只读函数，使用前需要引入。如果给变量加上readonly属性，则数据只能读取，不能更改。修改时会发出警告，但不会改变值。使用方法：import{readonly}from"vue"letinfo=readonly('read-onlyinfovalue')setTimout(()=>{info="Updateinfo"//两秒后更新info的值},2000)运行两秒后，浏览器发出信息值不可修改的警告。所以我们给provide发出的数据添加一个只读属性，防止发出的数据被修改。CompleteExample2中添加readonlytoprovide，provide('info',readonly(info))会在子组件修改值时有只读提示。修改值时，仍然需要在提供发布数据的组件中修改数据，所以修改方法会在组件中添加，同时发布，在子组件调用即可。如：//publishletinfo=ref("你今天学习了吗？")constchangeInfo=(val)=>{info.value=val}provide('info',readonly(info))provide('changeInfo',changeInfo)//订阅constchang=inject('changeInfo')chang('冲前端工程师')完成示例3：修改数据//父组件代码//InjectCom子组件代码