我一直在尋找一種簡單的解決方案來以編程方式在 Vue 3 應用程式中生成組件。到目前為止，我已經使用defineComponent了擴展 div 組件并通過createApp和將其附加到主組件mount：
主要組件
<template>
<button type="button" v-on:click="addDiv"></button>
<div id="app-main">
</div>
</template>
<script>
import {defineComponent, createApp} from 'vue'
import Div from './components/Div.vue'
export default{
name: 'App',
methods: {
addDiv: () => {
let newDiv = defineComponent({extends: Div});
createApp(newDiv).mount("#app-main");
}
}
}
</script>
磁區組件：
<template>
<div>This is a div</div>
</template>
<script>
export default {
name: 'Div'
}
</script>
我的問題是mount替換目標元素中的所有內容。如果您單擊按鈕 3 次，則只顯示 1 個 div 而不是 3 個。我需要一種方法，其中代碼將組件作為子元素附加到目標元素中，從而允許我創建任意數量的 div 組件。提前致謝！
uj5u.com熱心網友回復：
不要使用，mount因為它旨在安裝新的 Vue 實體。您想要使用的是該<component :is="component_name">功能，并且可能有一個陣列或其他資料結構，其中包含您希望呈現的組件串列。
例如，請考慮以下簡單示例：
Vue.component('my-component', {
// component config goes here, omitting for simplicity.
});
new Vue({
el: '#app',
data: {
elements: []
},
methods: {
addNewDiv() {
this.elements.push({type: 'my-component'});
}
}
});
<div id="app">
<component v-for="element in elements" :is="element.type"></component>
</div>
這將elements動態迭代陣列，并將用<component>陣列元素定義的任何內容替換標簽的每個實體。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395503.html