高级vue setup 中provide和inject用法
父组件
<script>
import { computed, provide, watch } from 'vue'
import {ref,reactive,toRefs} from 'vue'
import father from './components/father.vue'
export default{
setup() {
let data = reactive({
mes: 'adssss',
userObj: {
userName: "www.96net.com.cn"
},
});
provide('name', data.mes)
const add = () => {
data.mes++;
console.log(data.mes);
};
watch(() => data.mes, (newvalue, oldvlaue) => {
console.log("n" + newvalue);
console.log("o" + oldvlaue);
});
return {
...toRefs(data),
add,
};
},
components: { father}
}
</script>
<template>
<div id="as">
{{mes}}
<br>
</div>
<button @click="add">+</button>
<hr>
<father></father>
</template>
<style scoped>
</style>
子组件
<template>
www.96net.com.cn
{{ name }}
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const name = inject('name')
return {
name
}
}
}
</script>
