vue中provide的⽤法_Vue中使⽤provide和inject
相信⼤家在⼯作中⼀定遇到过多层嵌套组件，⽽vue 的组件数据通信⽅式⼜有很多种。济南市七里山幼儿园
⽐如vuex、$parent与$children、prop、$emit与$on、$attrs与$linters、eventBus、ref。
今天主要为⼤家分享的是provide和inject。
很多⼈会问，那我直接使⽤vuex不就⾏了吗？
vuex固然是好！
但是，有可能项⽬本⾝并没有使⽤vuex的必要，这个时候provide和inject就闪亮登场啦～
使我们开发的时候，如有神助～
官⽅解释
provide
选项应该是⼀个对象或返回⼀个对象的函数。该对象包含可注⼊其⼦孙的property。
inject
可以是⼀个字符串数组、也可以是⼀个对象
说⽩了，就是provide在祖先组件中注⼊，inject 在需要使⽤的地⽅引⼊即可。
我们可以把依赖注⼊看做⼀部分⼤范围的prop，只不过它以下特点：
祖先组件不需要知道哪些后代组件使⽤它提供的属性
后代组件不需要知道被注⼊的属性是来⾃那⾥
注意：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然⽽，如果你传⼊了⼀个可监听的对象，那么其对象的 property 还是可响应的。
实例
⽬录结构
祖先
index.vue
爷爷级别 : {{ nameObj.name }} 今年 {{ age }}岁， 城市{{ city }}
改变名称
import child from '@/components/ProvideText/parent'
export default {
name: 'ProvideGrandPa',
components: { child },
data: function() {
return {
nameObj: {
name: '⼩布'
forced},
insomniac
age: 12,
city: '北京'
}
},
provide() {
return {
nameObj: this.nameObj, //传⼊⼀个可监听的对象cityFn: () => this.city, //通过computed来计算注⼊的值age: this.age //直接传值
}
},
methods: {
changeName() {
if (this.nameObj.name === '⼩布') {
this.nameObj.name = '貂蝉'
this.city = '⾹港'
this.age = 24
} el {
this.nameObj.name = '⼩布'
this.city = '北京'
世界杯主题曲we will rock youthis.age = 12partiality
}
}
}
}
.grandPa{
width: 600px;
height:100px;
line-height: 100px;
border: 2px solid #7fffd4;
padding:0 10px;
text-align: center;
margin:50px auto;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
复制代码
lecture中间组件
parent.vue
⽗亲级别 : 只⽤作中转
import Son from './son'tombs
export default {
name: 'ProvideParent',
components: { Son }
}
.parent{
height:100px;
line-height: 100px;
border: 2px solid #feafef;
padding:0 10px;
margin-top: 20px;
strong{
font-size: 20px;
text-decoration: underline;;
}
}
复制代码
后代组件
son.vue
孙⼦级别 : {{ nameObj.name }} 今年 {{ age }}岁， 城市{{ city }} export default {
name: 'ProvideSon',
//inject 来获取的值
inject: ['nameObj', 'age', 'cityFn'],
连衣裙的款式
computed: {
city() {
apd
return this.cityFn()
}
}
}
.son{
height:100px;
line-height: 100px;
padding:0 10px;
至于英文margin: 20px;
border: 1px solid #49e2af;
strong{
font-size: 20px;
text-decoration: underline;;
}
.blue{
color: blue;
}
}
复制代码
我们来看⼀下运⾏结果。
图⼀：未点击【改变名称】按钮，原有状态
图⼆：已经点击【改变名称】按钮，更新后状态 ⼤家可以对⽐⼀下前后差异。
会发现⼀个⼩细节。
⽆论我点击多少次，孙⼦组件的年龄age字段永远都是12并不会发⽣变化。
正是官⽹所提到的provide 和 inject 绑定并不是可响应的。这是刻意为之的。
所以⼤家使⽤的时候，⼀定要注意注⼊的⽅式，不然很可能⽆法实现数据响应。
希望今天的分享对你能有所帮助～
近期
