vue2中的用法
基础用法
传递字符串 传递的数据不是响应式的
//grandpa.vue
export default {
components: { Son },
provide:{
grandpaMsg:'哈哈哈'
}
//grandson.vue
<template>
<div>
<el-dialog v-model="visible" title="孙子组件" width="30%" @close="closeDialog">
<div>
信息：{{grandpaMsg}}
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
inject:['grandpaMsg'],
传递data里的属性
需要用return返回出去，不然会报错 传递的数据不是响应式的
//grandpa
components: { Son },
provide(){
return {
grandpaMsg:this.message
}
},
高级用法
传递过去的数据是响应式的
//grandpa
provide(){
return {
grandpaMsg:()=>this.message
}
},
//grandson
<el-dialog v-model="visible" title="孙子组件" width="30%" @close="closeDialog">
<div>
信息：{{grandpaMsg()}}
</div>
</el-dialog>
拓展用法
直接将this传递过去，这样组件会获得另一个组件的实例对象，这种方式也是响应式的
provide(){
return {
grandpaMsg:this
}
},
vue3中的用法
inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。
父组件向其子代组件传递了一个对象， provide是在setUp这个组合APi中使用的。 provide的使用方式： provide（'共享数据名称',共享值）， 共享值可以是字符串、数字、对象、数组 子组件在进行接收到的时候； let xxx=inject('共享数据名称');
祖组件中
<template>
<MyMarker />
</template>
<script>
import MyMarker from '../components/MyMarker'
export default {
components: {
MyMarker
},
provide: {
location: 'North Pole',
geolocation: {
longitude: 90,
latitude: 135
}
}
}
</script>
后代组件中：
<template>
<div>
{{location}} - {{geolocation}}
</div>
</template>
<!-- src/components/MyMarker.vue -->
<script>
export default {
inject: ['location', 'geolocation']
}
</script>
组合式 provide
在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。
provide 函数允许你通过两个参数定义 property：
property 的 name ( 类型)
property 的 value
<template>
<MyMarker />
</template>
<script>
import MyMarker from '../components/MyMarker'
import {provide} from 'vue'
export default {
components: {
MyMarker
},
setup() {
provide('location', 'North Pole')
provide('geolocation', {
longitude: 90,
latitude: 135
})
},
}
</script>
组合式 inject
在 setup() 中使用 inject 时，还需要从 vue 显式导入它。一旦我们这样做了，我们就可以调用它来定义如何将它暴露给我们的组件。
inject 函数有两个参数：
要注入的 property 的名称
一个默认的值 (可选)
<template>
<div>{{ location }} - {{ geolocation }}</div>
</template>
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
name: 'MyMarker',
setup() {
const location = inject('location')
const geolocation = inject('geolocation')
return {
location,
geolocation
}
}
}
</script>
响应式
以上的用法都不是响应式的数据
为了增加提供值和注入值之间的响应性，我们可以在提供值时使用 ref 或 reactive。
<template>
<MyMarker />
</template>
<script>
import MyMarker from '../components/MyMarker'
import {provide, ref, reactive} from 'vue'
export default {
components: {
MyMarker
},
setup() {
const location = ref('North Pole')
const geolocation = reactive({
longitude: 90,
latitude: 135
})
provide('location', location)
provide('geolocation', geolocation)
},
}
</script>
有时我们需要在注入数据的组件内部更新注入的数据。在这种情况下，我们建议提供一个方法来负责改变响应式 property。
<template>
<MyMarker />
</template>
<script>
import MyMarker from '../components/MyMarker'
import {provide, ref, reactive} from 'vue'
export default {
components: {
MyMarker
},
setup() {
const location = ref('North Pole')
const geolocation = reactive({
longitude: 90,
latitude: 135
})
const updateLocation = () => {
location.value = "hahaha"
}
provide('location', location)
provide('geolocation', geolocation)
provide('updateLocation', updateLocation)//直接将改变数据的方法传过去
},
}
</script>
<template>
<div>{{ location }} - {{ geolocation }}</div>
</template>
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
name: 'MyMarker',
setup() {
const location = inject('location')
const geolocation = inject('geolocation')
const updateLocation = inject('updateLocation')
return {
location,
geolocation,
updateLocation
}
}
}
</script>
如果要确保通过 provide 传递的数据不会被注入的组件更改，我们建议对提供者的 property 使用 readonly。
<template>
<MyMarker />
</template>
<script>
import MyMarker from '../components/MyMarker'
import {provide, ref, reactive, readonly} from 'vue'
export default {
components: {
MyMarker
},
setup() {
const location = ref('North Pole')
const geolocation = reactive({
longitude: 90,
latitude: 135
})
const updateLocation = () => {
location.value = "hahaha"
}
provide('location', readonly(location))
provide('geolocation', readonly(geolocation))
provide('updateLocation', updateLocation)
},
}
</script>
