vue3在setup中使用依赖注入
<template>
<div>
<HelloWorld ref="HelloWorld" />
<p>{{v}}---v</p>
<p>{{objV.keyN}}---keyN</p>
</div>
</template>
< script >
import HelloWorld from './components/HelloWorld.vue';
import { provide,reactive, ref,readonly } from 'vue';
export default {
name: 'App',
setup() {
// 使用ref、reactive为要注入的数据添加响应性
const v = ref(1);
const objV = reactive({
keyN: 2
})
// 为子组件暴露修改注入数据的方法
const changeP = () => {
v.value++;
objV.keyN++;
}
// 使用provide注入数据，使用 readonly 避免子组件随意更改注入的数据
provide('name',readonly(v));
provide('nameObj',readonly(objV));
provide('changeP',changeP);
return {
v,
objV
}
},
data() {
return {
}
},
computed: {
},
watch: {
},
components: {
HelloWorld,
},
methods: {
}
}
</script>
<style scoped>
body {
margin : 0px;
padding : 0px;
}
</style>