在Vue 3中,我們可以通過自定義一個渲染函數來動態添加組件。具體實現方法如下:
const app = Vue.createApp({}); const ChildComponent = { template: ``, }; const DynamicComponent = { setup() { const components = Vue.reactive([]); const addComponent = () =>{ components.push(ChildComponent); }; return { components, addComponent, }; }, render() { return Vue.h( "div", null, [ Vue.h("button", { onClick: this.addComponent }, "添加組件"), this.components.map((Component, index) =>{ return Vue.h(Component, { key: index }); }), ] ) }, }; app.mount("#app");這是子組件
在這個例子中,我們創建了兩個組件:ChildComponent和DynamicComponent。然后,在DynamicComponent中,我們使用Vue.reactive創建了一個數組components來存放添加的子組件,使用Vue.h來渲染DynamicComponent的模板。
當點擊“添加組件”按鈕時,我們調用addComponent方法向components數組中添加了一個ChildComponent。由于用到了Vue.reactive,組件的數據更新會自動觸發視圖的重新渲染,因此新添加的子組件會被渲染出來。
總體來說,動態添加組件在Vue 3中變得更加簡單和高效。我們可以通過自定義渲染函數的方式靈活地控制添加、刪除和修改組件,為應用開發帶來了更多可能性。