Provide returns wrong 'this' - Should return parent component instead of child.
Aug 4th 2023
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
Run the application.
What is expected?
The text on top 'I should not be displayed' should be replaced by 'I should be displayed'.
What is actually happening?
It shows the child's 'this' scope which returns 'I should not be displayed'
System Info
System:
OS: macOS 13.5
CPU: (8) arm64 Apple M1
Memory: 28.84 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
pnpm: 8.6.10 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
Browsers:
Chrome: 115.0.5790.170
Safari: 16.6
Any additional comments?
The documentation says that 'this' should work: https://vuejs.org/guide/components/provide-inject.html#provide
Aug 6th 2023
<script lang="ts" setup>
import { ref, provide } from 'vue';
import Comp from './Comp.vue';
const msg = ref('Text');
provide('msg', msg.value);
</script>
<template>
<Comp />
</template>
<script lang="ts" setup>
import { inject } from 'vue';
const msg = inject('msg');
</script>
<template>
<div>{{ msg }}</div>
</template>
Aug 6th 2023
Sorry my mistake, I got it to work.