diff --git a/src/mixin.ts b/src/mixin.ts index 9bdc197a..b0c3ae52 100644 --- a/src/mixin.ts +++ b/src/mixin.ts @@ -35,6 +35,9 @@ export function mixin(Vue: VueConstructor) { }, updated(this: ComponentInstance) { updateTemplateRef(this) + if (this.$vnode?.context) { + updateTemplateRef(this.$vnode.context) + } }, }) diff --git a/test/templateRefs.spec.js b/test/templateRefs.spec.js index 10bbc566..f41ec845 100644 --- a/test/templateRefs.spec.js +++ b/test/templateRefs.spec.js @@ -1,5 +1,5 @@ const Vue = require('vue/dist/vue.common.js') -const { ref, watchEffect } = require('../src') +const { ref, watchEffect, nextTick } = require('../src') describe('ref', () => { it('should work', (done) => { @@ -69,6 +69,50 @@ describe('ref', () => { .then(done) }) + // #296 + it('should dynamically update refs in context', async () => { + const vm = new Vue({ + setup() { + const barRef = ref(null) + return { + barRef, + } + }, + template: `
+ +
`, + components: { + bar: { + setup() { + const name = ref('bar') + return { + name, + } + }, + template: '
{{name}}
', + }, + foo: { + setup() { + const showSlot = ref(false) + const setShow = () => { + showSlot.value = true + } + return { + setShow, + showSlot, + } + }, + template: `
`, + }, + }, + }).$mount() + await nextTick() + //@ts-ignore + vm.$children[0].setShow() + await nextTick() + //@ts-ignore + expect(vm.$refs.barRef).toBe(vm.barRef) + }) // TODO: how ? // it('work with createElement', () => { // let root;