前言
provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个。
一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。
在组合式API中的用法
基本用法
似乎,组合式API的provide没有提供批量方法, 只能每个变量写一句。
顶级组件:
核心代码:
<script>
import { reactive, provide } from 'vue'
import Child from './divChild'
export default {
name: 'Father',
components: {
Child
},
setup () {
let car = reactive({
name: 'benchi',
price: 300000
})
provide('car', car)
return {
car
}
}
}
</script>
顶级组件的全部代码
<template>
<div class="Father">
<h1>Father</h1>
<div>
<div>name: {{ car.name }}</div>
<div>price: {{ car.price }}</div>
</div>
<Child></Child>
</div>
</template>
<script>
import { reactive, provide } from 'vue'
import Child from './divChild'
export default {
name: 'Father',
components: {
Child
},
setup () {
let car = reactive({
name: 'benchi',
price: 300000
})
provide('car', car)
return {
car
}
}
}
</script>
<style scoped>
.Father {
height: 30px;
padding: 10px;
background-color: red;
}
</style>
后代组件
核心代码
<script>
import { inject } from 'vue'
export default {
name: 'son',
setup () {
let x1 = inject('car')
console.log("x111=====", x1)
return {
x1
}
}
}
</script>
全部代码
<template>
<div class="Son">
<h1>son</h1>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: 'son',
setup () {
let x1 = inject('car')
console.log("x111=====", x1)
return {
x1
}
}
}
</script>
<style scoped>
</style>
本篇结束