vue h函数props丢失响应

Question

vue h函数的props修改不能响应的问题

模板代码loadingTemplate

<script lang="ts" setup>
import { watch } from "vue"

const props = defineProps<{
  title: string
}>()
watch(
  () => props.title,
  () => {
    console.log("改变了", props.title)
  }
)
</script>
<template>
  <div class="wy-loading">
    <div class="wy-contents">
      <div class="wy-icon"></div>
      <div class="wy-text">{{ props.title }}</div>
    </div>
  </div>
</template>

js代码

showLoading(options = { title: "正在测试" }) {
    const definedOptions = ref({})
    const optionsC = ref({ ...definedOptions.value, ...options })


    setTimeout(() => {
      optionsC.value = { title: "拜拜" }
      console.log("执行了")
    }, 1000)
    const vNode = h(loadingTemplate, optionsC.value)
    render(vNode, this.container)
    document.body.appendChild(this.container)
  }

我想过把options变成ref实现，但是没效果

我想要达到的结果,不重新挂载，修改props能直接更新dom

Answer 1

• 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：Vue props数据传递