安徽省水利建设厅官方网站,渭南几个区,网站建设步骤 高清教 程,上海免费网站建设品牌vue 中的依赖注入#xff0c;官网文档已经非常详细#xff0c;笔者在这里总结一份 目录
1、背景介绍
2、代码实现
2.1、依赖注入固定值
2.2、 依赖注入响应式数据
3、注入别名
4、注入默认值
5、应用层 Provide
6、使用 Symbol 作注入名 1、背景介绍
为什么会出现依…vue 中的依赖注入官网文档已经非常详细笔者在这里总结一份 目录
1、背景介绍
2、代码实现
2.1、依赖注入固定值
2.2、 依赖注入响应式数据
3、注入别名
4、注入默认值
5、应用层 Provide
6、使用 Symbol 作注入名 1、背景介绍
为什么会出现依赖注入呢其实它是要解决 Prop 逐级透传问题
Prop 逐级透传问题即通常情况下当我们需要从父组件向子组件传递数据时会使用 props如果只是父传子这样层级不深的结构是比较简单的如果是层级非常深祖太爷、太爷、爷、父、子、孙、重孙组件......这样多层级嵌套的组件形成了一颗巨大的组件树此时如果重孙组件需要祖太爷组件中的部分数据在这种情况下如果仅使用 props 则必须将其沿着组件链逐级传递下去这会非常麻烦。而且中间的爷、父等组件可能根本不关心这些 props为了使重孙组件能够访问到它们仍然需要定义并向下传递。如果组件链路非常长可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传” vue 中提供 provide 和 inject 可以帮助我们解决这一问题一个父组件相对于其所有的后代组件会作为依赖提供者。任何后代的组件树无论层级有多深都可以注入由父组件提供给整条链路的依赖
下图摘自vue官网 2、代码实现
下面代码实现依赖注入
新建vue项目这里笔者定义3个组件。图书馆组件Library爷图书组件Book父、标题组件Title孙实现图书馆组件Library爷提供数据标题组件Title孙注入使用
项目结构 2.1、依赖注入固定值
图书馆组件Library爷提供 bookName
templatedivh1图书馆/h1Book//div
/template
script
import Book from ./Book.vue
export default {components: {Book},provide: {bookName: 三国演义},
}
/script
图书组件Book父
templatedivh2书名/h2Title //div
/template
script
import Title from ./Title.vue
export default {components: {Title}
}
/script
标题组件Title孙注入bookName
templatedivp标题/pp{{bookName}}/p/div
/template
script
export default {inject: [bookName],
}
/script
App.vue引入图书馆组件Library
templateLibrary /
/templatescript
import Library from ./components/Library.vueexport default {name: App,components: {Library}
}
/script运行效果 2.2、 依赖注入响应式数据
上例2.1依赖注入的 bookName 是个固定的值本例将 bookName 改成响应式数据
图书组件Book父和标题组件Title孙不需要改只改图书馆组件Library爷即可 图书馆组件Library爷
为保证注入方和供给方之间的响应性链接需要使用 computed() 函数提供一个计算属性
templatedivh1图书馆/h1button clickchangeBookName修改书籍名称/buttonBook//div
/template
script
import { computed } from vue
import Book from ./Book.vue
export default {components: {Book},provide() {return {bookName: computed(()this.bookName)}},data() {return {bookName: 三国演义}},methods: {changeBookName() {this.bookName 西游记}}}
/script
图书组件Book父
templatedivh2书名/h2Title //div
/template
script
import Title from ./Title.vue
export default {components: {Title}
}
/script
标题组件Title孙
templatedivp标题/pp{{bookName}}/p/div
/template
script
export default {inject: [bookName],
}
/script
运行效果
点击按钮修改图书名称 3、注入别名
上面例子中标题组件Title孙中注入的 bookName使用是也是bookName即访问的本地属性名和注入名是相同的如果我们想要用一个不同的本地属性名注入该属性我们需要在 inject 选项的属性上使用对象的形式
看下面代码
注入bookName本地属性使用 name
templatedivp标题/pp{{name}}/p/div
/template
script
export default {inject: {name: {from: bookName}}
}
/script 4、注入默认值
如果注入的属性没有任何组件提供则会抛出一个运行时警告如果注入一个值时不要求必须有提供者那么我们应该声明一个默认值和 props 类似
将图书馆组件Library爷中的provide注释掉
templatedivh1图书馆/h1button clickchangeBookName修改书籍名称/buttonBook//div
/template
script
import { computed } from vue
import Book from ./Book.vue
export default {components: {Book},// provide() {// return {// bookName: computed(()this.bookName)// }// },data() {return {bookName: 三国演义}},methods: {changeBookName() {this.bookName 西游记}}}
/script
图书组件Book父不变
templatedivh2书名/h2Title //div
/template
script
import Title from ./Title.vue
export default {components: {Title}
}
/script
标题组件Title孙中添加注入的默认值
templatedivp标题/pp{{name}}/p/div
/template
script
export default {inject: {name: {from: bookName,default: 红楼梦}}
}
/script
运行效果 5、应用层 Provide
除了在一个组件中提供依赖我们还可以在整个应用层面提供依赖
在 main.js 中提供依赖
import { createApp } from vue
import App from ./App.vueconst app createApp(App)
app.provide(title, 古典名著)
app.config.unwrapInjectedRef true
app.mount(#app)在标题组件Title孙中注入title
templatedivp标题/pp{{ title }}/pp{{name}}/p/div
/template
script
export default {inject: {name: {from: bookName,default: 红楼梦},title: {}}
}
/script
运行效果 6、使用 Symbol 作注入名
如果有非常多的依赖提供建议最好使用 Symbol 来作为注入名以避免潜在的冲突
笔者在components目录下定义keys.js文件 keys.js 文件内容
export const bookName Symbol()
在图书馆组件Library爷中引入keys.js
templatedivh1图书馆/h1button clickchangeBookName修改书籍名称/buttonBook//div
/template
script
import { computed } from vue
import Book from ./Book.vue
import { bookName } from ./keys.js
export default {components: {Book},provide() {return {[bookName]: computed(()this.bookName)}},data() {return {bookName: 三国演义}},methods: {changeBookName() {this.bookName 西游记}}}
/script
在标题组件Title孙中引入keys.js
templatedivp标题/pp{{ title }}/pp{{name}}/p/div
/template
script
import { bookName } from ./keys.js
export default {inject: {name: {from: bookName,default: 红楼梦},title: {}}
}
/script
运行效果 至此完
