provide:
提供依赖是一个对象,或者是一个返回对象的函数。里面包含要给子孙后代的东西,也就是属性和属性值。
inject:
注入依赖
一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值
父组件:
<template>
<div class="home">
{{num}}
<input type="text" v-model="num"/>
<!-- 子组件1 -->
<one @add='add'></one>-----
</div>
</template>
<script>
import {ref,reactive,toRefs,provide} from 'vue'
import one from '../components/one.vue'
export default {
setup(props) {
let num=ref(1)
//传递到子组件
provide('num',num)
const add=()=>{
console.log(num.value)
num.value++
}
//传递方法
provide('add',add)
return {num,add}
},
components:{
one
}
}
</script>
子组件:
<template>
<div>
{{num}}
<button @click="add">++</button>
</div>
</template>
<script>
import {ref,reactive,toRefs,provide,inject} from 'vue'
export default {
setup(props,ctx) {
//接收到num值
const num=inject('num')
console.log(num)
//接收方法
const add=inject('add')
return {num,add}
}
}
</script>
这样就实现了响应变化