vue3 component 动态组件和动态ref

### Vue3 动态组件间通信 在 Vue 3 中，动态组件可以通过 `v-bind` 绑定属性以及事件监听器来实现在不同状态下的数据交互。对于更复杂的场景，则可以利用提供者/消费者模式 (Provide / Inject)，或是 Vuex 这样的全局状态管理工具。 #### 使用 Provide 和 Inject 实现动态组件间的通信 当涉及到多层嵌套的动态组件时，使用 provide/inject 是一种有效的方式。这种方式可以让祖先组件作为提供方，而任何后代组件都可以成为消费方，无需逐级传递 props。 ```javascript // 祖先组件 Parent.vue export default { setup() { const message = ref(&#39;Hello from parent&#39;); provide(&#39;message&#39;, message); return {}; } } ``` ```html <!-- 子组件 Child.vue --> <template> <div>{{ localMessage }}</div> </template> <script> import { inject } from &#39;vue&#39;; export default { setup() { const localMessage = inject(&#39;message&#39;); return { localMessage }; } }; </script> ``` 这种方法不仅限于静态定义，在 `<component :is="currentComponent">` 形式的动态组件中同样适用[^1]。 #### 利用 Emit 触发自定义事件 如果两个动态组件存在直接父子关系，那么可以直接通过 `$emit()` 方法触发自定义事件来进行双向绑定或回调通知： ```html <!-- 父组件 Parent.vue --> <template> <button @click="changeChildData()">Change child data</button> <component :is="selectedComponent" @custom-event="handleCustomEvent"></component> </template> <script> export default { components: { /* ... */ }, methods: { changeChildData(){ this.$refs.childRef.changeData(); }, handleCustomEvent(data){ console.log(`Received event with ${data}`); } } }; </script> ``` ```html <!-- 子组件 Child.vue --> <template> <!-- Some template code here... --> </template> <script> export default { mounted(){ this.$emit(&#39;custom-event&#39;, &#39;some payload&#39;); }, methods:{ changeData(){ // Update some internal state and emit an update back to the parent. this.$emit(&#39;update-data&#39;, newData); } } }; </script> ``` 这种机制使得即使是在运行期间切换的不同组件实例之间也能保持良好的互动能力[^2]。 #### 结合 UseStore 或其他状态管理模式 对于跨多个层次结构甚至整个应用范围内的状态同步需求，推荐采用官方的状态管理系统——Vuex；或者考虑基于 Composition API 的新解决方案 Pinia。这些库提供了集中化存储逻辑、异步操作处理等功能特性，非常适合大型项目的开发维护工作[^4]。