网站建设备案策划书,商务网站创建多少钱,电话网络营销是什么,具权威的小企业网站建设简介
provide 与 inject 是一种跨层级组件#xff08;祖孙#xff09;通信方式。当组件多层嵌套时#xff0c;不需要将数据一层一层的向下传递#xff0c;通过它俩可以实现跨层级组件通信。 provide#xff1a;提供者
注入一个值#xff0c;可以被后代组件接收。
prov…简介
provide 与 inject 是一种跨层级组件祖孙通信方式。当组件多层嵌套时不需要将数据一层一层的向下传递通过它俩可以实现跨层级组件通信。 provide提供者
注入一个值可以被后代组件接收。
provide它接受两个参数
第一个参数是要注入的 key可以是一个字符串或者一个 symbol。第二个参数是要注入的值。
inject接收者
接收一个由祖先组件或整个应用 (通过 app.provide()) 注入的值。
inject它接受两个参数
第一个参数是注入的 key找不到对应的 key则返回 undefined 或默认值。 Vue 会遍历父组件链通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值那么离得更近的组件将会 覆盖 链上更远的组件所提供的值。如果没有能通过 key 匹配到值inject 将返回 undefined除非提供了一个默认值。第二个参数是默认值非必填也可以是一个工厂函数。
如果默认值本身就是一个函数那么你必须将 false 作为第三个参数传入表明这个函数就是默认值而不是一个工厂函数。
const fn inject(function, () {}, false)
案列
App.vue组件
templatedivChild/Childdiv v-ifisShow{{user.name}}--{{user.age}}--{{user.email}}/divdiv{{}}/div/div
/template
script
import { ref, provide, toRef, reactive } from vue;import Child from ./components/Child.vue //导入Child组件模板
export default {components: {Child: Child //注册Child子组件},setup(props, context) {const isShow ref(true);const email ref(123qq.com);const user ref({name: 张三,age: 18,email,})const data reactive({baseUrl: http://localhost/,port: 8080,action: login})const myFun(){email.value999qq.com;}provide(user, user);provide(email, email)provide(data, data);provide(myFun,myFun,true); //向后代组件提供一个函数如果提供的是一个函数第三个参数必须为true 在注入的时候用法const myfuninject(myFun); 然后可以直接执行函数myfun()return {isShow,user,}}
}
/scriptChild.vue子组件
templatedivbutton返回/buttonbutton clickmyClick点我改名/button/div
/template
script
import {inject, ref } from vue;export default {setup() {const userinject(user);console.log(user.value.email);console.log(user.value.name);console.log(user.value.age);const emialinject(email);console.log(emial.value);const datainject(data);console.log(data.baseUrl);console.log(data.port);console.log(data.action);const myfuninject(myFun); //注入一个函数const myClick(){//在VOA模式中我们的案例在provide向后代组件提供了一个this 即provide(){ return{app:this}}目的是为了再后代组件中可以修改祖组件中的对象值。//在VCA模式中因为user在app.vue中user是用ref包装的它是响应式的所以这里修改后就直接修改了父组件app.vue中的user.value.name值了。不需要依赖this了user.value.name李四;myfun();}return {myClick,}}
}
/script
