Vue3中父组件ref绑定的子组件prop为何无法即时更新？

核心原因 #

Vue的响应式更新是异步批量执行的。当你在changeUrl方法中修改urlRef.value后，Vue不会立刻更新Child组件的sourceUrl prop，而是将这次更新放入任务队列，等当前同步代码执行完毕后才会处理组件的重新渲染和props更新。所以你紧接着调用childComponentRef.value.injectHtml()时，Child组件的props.sourceUrl仍为旧值WebPageA.html，自然无法注入新页面的内容。

你的实现问题 #

1. 直接通过原生DOM操作注入HTML，没有利用Vue的响应式系统，既增加维护成本，也容易和Vue的DOM更新逻辑冲突。
2. 父组件手动调用子组件方法的方式，破坏了Vue单向数据流的设计原则，子组件应该由props驱动自动更新，而非父组件主动触发方法。
3. 未监听props变化：当前Child组件仅在onMounted时执行一次注入，props更新后不会自动触发重新注入。

修复方案 #

方案1：等待Vue异步更新完成后调用方法 #

使用nextTick等待Vue完成DOM和props更新后，再执行注入操作：
修改App.vue的changeUrl方法：

<script setup>
import { ref, nextTick } from 'vue';
import Child from './components/Child.vue';

const childComponentRef = ref(null);
const urlRef = ref("WebPageA.html");

const changeUrl = async () => {
   urlRef.value = "WebPageB.html";
   console.log(`App: Button clicked to change url to ${urlRef.value}`);

   // 等待Vue完成DOM与props更新
   await nextTick();
   childComponentRef.value.injectHtml();
}
</script>

方案2：子组件监听props变化，自动触发注入（更推荐） #

这种方式符合Vue响应式设计，无需父组件手动调用子组件方法：
修改Child.vue：

<script setup>
import { watch } from 'vue'

const props = defineProps({
  sourceUrl: String,
});

const injectHtml = async () => {
   console.log(`Child: Begin injecting! Source ${props.sourceUrl}`);

   try {
      const response = await fetch(props.sourceUrl);

      if (response.ok) {
         const container = document.querySelector("#container");
         // 清空容器旧内容
         container.innerHTML = '';
         
         const tempDiv = document.createElement("div");
         tempDiv.id = "new-html-container";
         tempDiv.innerHTML = await response.text();
         
         container.appendChild(tempDiv);
      }
   } catch(error) {
      console.log("Error during injection");
      console.log(error);
   }
}

// 监听sourceUrl变化，自动触发注入；immediate: true 保证挂载时执行一次
watch(() => props.sourceUrl, () => {
  props.sourceUrl && injectHtml();
}, { immediate: true });

// 无需再暴露injectHtml和onMounted调用
// defineExpose({ injectHtml });
// onMounted(() => injectHtml());
</script>

同时App.vue可移除手动调用injectHtml的代码：

<script setup>
import { ref } from 'vue';
import Child from './components/Child.vue';

const urlRef = ref("WebPageA.html");

const changeUrl = () => {
   urlRef.value = "WebPageB.html";
   console.log(`App: Button clicked to change url to ${urlRef.value}`);
}
</script>

额外优化建议 #

避免直接操作DOM，改用Vue的v-html指令绑定内容（注意：若注入的HTML来自不可信源，请勿使用v-html，防止XSS攻击）：
Child.vue改造示例：

<template>
   <div>
      <h3>Here's the source url: {{ sourceUrl }}</h3>
   </div>

   <div id="container" v-html="injectedContent"></div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  sourceUrl: String,
});

const injectedContent = ref('');

const fetchHtml = async () => {
   try {
      const response = await fetch(props.sourceUrl);
      if (response.ok) {
        injectedContent.value = await response.text();
      }
   } catch(error) {
      console.log("Error during fetch");
      console.log(error);
   }
}

watch(() => props.sourceUrl, fetchHtml, { immediate: true });
</script>

内容的提问来源于stack exchange，提问作者sweet-pineapple