vue3中createVNode中传递的prop会失去响应？

Z时代
2024-02-18
分类：IT

VUE3中
SFC中template的props是动态的
createVNode(component,{...})是非动态的
怎么能把第二种变成动态的

child.vue

<script setup>
//child-component 子组件
import { watch } from "vue"
let props = defineProps({
    aaa: Boolean,
    bb: Object
})
watch(() => { return props.aaa }, function (newVal) {
    console.log(newVal)
})</script>

parent.vue

<script setup>
//parent-component 父组件
import { createVNode, onMounted, reactive, ref, render } from 'vue';
import Child from './child.vue';
const foo = ref(false)
const bar = reactive({ a: 1, b: 2 })
const el = ref();
const div = document.createElement("div")
const vNode = createVNode(Child, { foo: foo.value, bar: bar });
//通过careteVnode 传递的foo不是动态的
onMounted(() => {
  el.value.appendChild(div)
})
render(vNode, div)
setInterval(() => {
  foo.value = !foo.value;
  bar.a++
}, 1000)
</script>
<template>
  <Child :foo="foo"></Child> <!--这里的子组件传递的foo是动态的 -->
  <div ref="el"></div></template>

回答：

你可以用 toRefs ：

<script setup>
//parent-component 父组件
import { createVNode, onMounted, reactive, ref, render, toRefs } from 'vue';
import Child from './child.vue';
const foo = ref(false)
const bar = reactive({ a: 1, b: 2 })
const el = ref();
const div = document.createElement("div")
const reactiveRefs = toRefs({ foo, bar })
const vNode = createVNode(Child, reactiveRefs);
onMounted(() => {
  el.value.appendChild(div)
})
render(vNode, div)
setInterval(() => {
  foo.value = !foo.value;
  bar.a++
}, 1000)
</script>
<template>
  <Child :foo="foo"></Child> <!--这样子组件传递的foo就是动态的 -->
  <div ref="el"></div></template>