Vue3提供与注入的方法
这篇文章主要介绍“Vue3提供与注入的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3提供与注入的方法”文章能帮助大家解决问题。
创新互联公司服务项目包括汝南网站建设、汝南网站制作、汝南网页制作以及汝南网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,汝南网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到汝南省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
提供与注入
通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下,你仍然需要将 prop 传递到整个组件链中,这可能会很烦人。
对于这种情况,我们可以使用 provide 和 inject 对。父组件可以作为其所有子组件的依赖项提供程序,而不管组件层次结构有多深。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这个数据。
ue例如,如果我们有这样的层次结构:
Root
└─ TemplateM
├─ TestCom
如果我们的子组件需要调用父组件的方法,我们就可以使用 provide/inject 将父组件的 Vue 实例对象传递进去:
import TestCom from './TestCom'
export default {
name: "TemplateM",
components: {
TestCom
},
provide: {
parent: "this"
},
data() {
return {
firstName: 'dsdsdd',
lastName: 'Ken'
};
},
methods: {
submit(options) {
console.log(options)
}
},
};
然后在子组件注入父组件的 parent 属性:
{{ title }}
export default {
name: "TestCom",
props: {
title: {
type: String,
default: "",
},
},
inject: ['parent'],
emits: ['click-event'],
created() {
console.log(this.$attrs)
},
methods: {
click(e) {
console.log(this.parent)
this.$emit('click-event', e)
}
}
};
查看浏览效果如下:
但是,如果我们尝试在此处提供一些组件实例 property,则这将不起作用:
provide: {
todoLength: this.todos.length // 将会导致错误 'Cannot read property 'length' of undefined——
},
要访问组件实例 property,我们需要将 provide 转换为返回对象的函数,接下来我们将父组件的实例传递到子组件中,这样我们就能在子组件访问到父组件的属性了:
import TestCom from "./TestCom";
export default {
name: "TemplateM",
components: {
TestCom,
},
provide() {
return { parent: this };
},
data() {
return {
firstName: "dsdsdd",
lastName: "Ken",
};
},
methods: {
submit(options) {
console.log(options);
},
},
};
在子组件中使用 parent:
{{ title }}
export default {
name: "TestCom",
props: {
title: {
type: String,
default: "",
},
},
inject: ['parent'],
emits: ['click-event'],
created() {
console.log(this.$attrs)
},
methods: {
click(e) {
console.log(this.parent)
this.$emit('click-event', e)
}
}
};
查看浏览效果如下:
这使我们能够更安全地继续开发该组件,而不必担心可能会更改/删除子组件所依赖的某些内容。这些组件之间的接口仍然是明确定义的,就像 prop 一样。
实际上,你可以将依赖注入看作是“long range props”,除了:
父组件不需要知道哪些子组件使用它提供的 property
子组件不需要知道 inject property 来自哪里
关于“Vue3提供与注入的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
分享文章:Vue3提供与注入的方法
网址分享:http://myzitong.com/article/pepcpe.html