provide/inject组件中作为组件选项使用与setup中使用的区别
主要用来进行学习记录的,方便日后自我查看,如有不足,希望可以指出~
作为组件选项使用,与methods使用方法相同
作为组件选项
provide:{代码逻辑}
inject:[provide中的key]
setup中
provide('providename',value)//两个参数:属性名,属性值
inject('providename','默认值')//两个参数:需要inject的属性名,默认值(可选)
组件中使用provide/inject选项来进行数据传输
inject注入组件
<template>
<div>
{{location}}<br/>{{location2.a}}</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ProvideInject',
//需要inject的属性名
inject: ['location', 'location2']
})
</script>
provide组件
<template>
<div>
<ProvideInject/>
</div>
</template>
<script lang="ts">
import ProvideInject from './components/ProvideInject.vue';
export default ({
name: 'App',
components: {ProvideInject},
//提供的数据
provide: {
location: 'North Pole',
location2: {
a: 90,
b: 100
}
}
});
</script>
setup选项中使用provide/inject
inject组件
<template>
<div>
{{userlocation}}<br/>{{userlocation2.a}}</div>
</template>
<script>
import { defineComponent, inject } from 'vue'
export default defineComponent({
name: 'ProvideInject',
setup () {
const userlocation = inject('location')
const userlocation2 = inject('location2')
return {
userlocation, userlocation2
}
}
})
</script>
provide组件
<template>
<div>
<ProvideInject/>
</div>
</template>
<script lang="ts">
import { provide } from 'vue'
import ProvideInject from './components/ProvideInject.vue';
export default ({
name: 'App',
components: {ProvideInject},
setup () {
const location = 'North Pole'
const location2 = {
a: 'alocatio2',
b: 'blocatio2'
}
provide('location', location)
provide('location2', location2 )
return {
location
}
}
});
</script>
响应式
我们在provide组件中添加
methods: {
updateLocation () {
this.location = '2222'
}
},
mounted () {
this.updateLocation()
}
我们 预期的结果是修改了location的值,页面中应该展示的是
2222
alocatio2
但是结果却还是
North Pole
alocatio2
因为setup中定义的值并不是响应式,想要变成响应式的需要使用ref(单个)或reactive(对象)
修改后的provide组件
<template>
<div>
<ProvideInject/>
</div>
</template>
<script lang="ts">
import { provide,ref,reactive} from 'vue'
import ProvideInject from './components/ProvideInject.vue';
export default ({
name: 'App',
components: {ProvideInject},
setup () {
const location = ref('North Pole')
const location2 = reactive({
a: 'alocatio2',
b: 'blocatio2'
})
provide('location', location)
provide('location2', location2 )
return {
location
}
},
methods: {
updateLocation () {
this.location = '2222'
}
},
mounted () {
this.updateLocation()
}
});
结果和预期的相同
2222
alocatio2
修改响应式属性
官网建议尽量在提供者provide中修改响应式的属性,如上面在provide组件中对location修改,
但是我们有时在inject组件中,需要对provide的数据进行修改
可以在provide中定义一个更新数据的方法,然后在inject中进行调用
provide组件
setup () {
const location = ref('North Pole')
const location2 = reactive({
a: 'alocatio2',
b: 'blocatio2'
})
const updateLocation = (val) => {
location.value = val
}
provide('location', location)
provide('location2', location2)
provide('updateLocation', updateLocation)
}
inject组件
setup () {
const userlocation = inject('location')
const userlocation2 = inject('location2')
const updateLocation = inject('updateLocation')
updateLocation('55555555511144447777')
return {
userlocation, userlocation2
}
}
在inject调用updateLocation方法后,对应结果也会改变
55555555511144447777
alocatio2
总结
建议需要修改的属性放在provide组件中
戳这里:查看对应官网地址