在父子组件传递数据时，学习笔通常使用的用原理是 props 和 emit，父传子时，法及使用的学习笔是 props，如果是用原理父组件传孙组件时，就需要先传给子组件，法及子组件再传给孙组件，学习笔如果多个子组件或多个孙组件使用时，用原理就需要传很多次，法及会很麻烦。学习笔 像这种情况，用原理可以使用 provide 和 inject 解决这种问题，法及不论组件嵌套多深，学习笔父组件都可以为所有子组件或孙组件提供数据，用原理父组件使用 provide 提供数据，法及子组件或孙组件 inject 注入数据。同时兄弟组件之间传值更方便。 一、Vue2 的 provide / inject 使用provide ：是一个对象，里面是属性和值。如： provide:{ info:"值" } 如果 provide 需要使用 data 内的数据时，这样写就会报错。访问组件实例 property 时，需要将 provide 转换为返回对象的函数。IT技术网 provide(){ return{ info: this.msg } } inject ：是一个字符串数组。如： inject: [ info ] 接收上边 provide 提供的 info 数据，也可以是一个对象，该对象包含 from 和 default 属性，from 是可用做的注入内容中搜索用的 key，default 属性是指定默认值。 在 vue2 中 project / inject 应用： //父组件 export default{ provide:{ info:"提供数据" } } //子组件 export default{ inject:[info], mounted(){ console.log("接收数据：", this.info) // 接收数据：提供数据 } } provide / inject 类似于消息的订阅和发布。provide 提供或发送数据， inject 接收数据。 二、Vue3 的 provide / inject 使用在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。 provide 函数接收两个参数： provide( name,value ) name：定义提供 property 的 name 。 value ：property 的值。 使用时： import { provide } from "vue" export default { setup(){ provide(info,"值") } } inject 函数有两个参数： inject(name,default) name：接收 provide 提供的属性名。 default：设置默认值，可以不写，是可选参数。网站模板 使用时： import { inject } from "vue" export default { setup(){ inject(info,"设置默认值") } } 完整实例1：provide/inject实例 //父组件代码 <script> import { provide } from "vue" export default { setup(){ provide(info,"值") } } </script> //子组件 代码 <template> {{info}} </template> <script> import { inject } from "vue" export default { setup(){ const info = inject(info) return{ info } } } </script> 三、添加响应性为了给 provide/inject 添加响应性，使用 ref 或 reactive 。 完整实例2：provide/inject 响应式 //父组件代码 <template> <div> info：{{info}} <InjectCom ></InjectCom> </div> </template> <script> import InjectCom from "./InjectCom" import { provide,readonly,ref } from "vue" export default { setup(){ let info = ref("今天你学习了吗？") setTimeout(()=>{ info.value = "不找借口，立马学习" },2000) provide(info,info) return{ info } }, components:{ InjectCom } } </script> // InjectCom 子组件代码 <template> {{info}} </template> <script> import { inject } from "vue" export default { setup(){ const info = inject(info) setTimeout(()=>{ info.value = "更新" },2000) return{ info } } } </script> 上述示例，在父组件或子组件都会修改 info 的值。 provide / inject 类似于消息的订阅和发布，遵循 vue 当中的单项数据流，什么意思呢?就是数据在哪，修改只能在哪，不能在数据传递处修改数据，容易造成状态不可预测。 在订阅组件内修改值的时候，可以被正常修改，如果其他组件也使用该值的时候，状态容易造成混乱，所以需要在源头上规避问题。 readonly 只读函数，使用之前需要引入，如果给变量加上 readonly 属性，则该数据只能读取，无法改变，被修改时会发出警告，但不会改变值。 使用方法： import { readonly } from "vue" let info = readonly(只读info值) setTimout(()=>{ info="更新info" //两秒后更新info的值 },2000) 运行两秒后，浏览器发出警告，免费源码下载提示 info 值不可修改。 所以我们就给provide发射出去的数据，添加一个只读属性，避免发射出去的数据被修改。 完整实例2的 provide 处添加 readonly 。 provide(info, readonly(info)) 在子组件修改值的时候，会有一个只读提醒。 修改值的时候，还是需要在 provide 发布数据的组件内修改数据，所以会在组件内添加修改方法，同时也发布出去，在子组件处调用就可以了。如： //发布 let info = ref("今天你学习了吗？") const changeInfo = (val)=>{ info.value = val } provide(info,readonly(info)) provide(changeInfo,changeInfo) //订阅 const chang = inject(changeInfo) chang(冲向前端工程师) 完整示例3：修改数据 // 父组件代码 <template> <div> info：{{info}} <InjectCom ></InjectCom> </div> </template> <script> import InjectCom from "./InjectCom" import { provide,readonly,ref } from "vue" export default { setup(){ let info = ref("今天你学习了吗？") const changeInfo = (val)=>{ info.value = val } provide(info,readonly(info)) provide(changeInfo,changeInfo) return{ info } }, components:{ InjectCom } } </script> //InjectCom 子组件代码 <template> <div> <button @click="chang(冲向前端工程师)">更新值</button> </div> </template> <script> import { inject } from "vue" export default { setup(){ const info = inject(info) const chang = inject(changeInfo) return{ info, chang } } } </script> |
喜欢
讨厌