如何在Vue.js中添加動態組件/部分

我需要基於用戶交互動態地將子組件添加到組件。我期待old issue，但它對我來說似乎是一個骯髒的黑客，此外，這是一個老問題，vue的發展是非常活躍，所以我不知道現在是否有更好的方法。如何在Vue.js中添加動態組件/部分

我到目前爲止所嘗試的是this fiddle，但顯然不工作，它說$mount只能被調用一次。我不知道該怎麼做，我的另一個選擇是動態組件，但爲此，我還需要動態添加一個<component>元素，所以它變成幾乎相同的問題。

那麼如何在客戶端單擊或其他客戶端事件上添加組件？

2016-03-10 Yerko Palma

您想從一開始就將自定義組件放在那裏，並使用v-if或v-for來顯示，隱藏，添加或減去這些組件。您讓數據驅動DOM，而不是自己管理DOM。小提琴例如：https://jsfiddle.net/f5n5z5oo/2/

你甚至可以讓他們使用的是什麼類型的組件is組件動態改變：

data: { 
    elements: [ 
    { type: 'component-a' }, 
    { type: 'component-b' } 
    ] 
} 
<div v-for="element in elements" :is="element.type"></div>

如果你具體談談您的使用情況下，我會嘗試進一步幫助！

來源

2016-03-10 21:40:44 Jeff

一如往常比更容易我雖然:)感謝在'提示v-的'用這個我也可以訪問'$ index'和sol讓我迎面而來的下一個問題，真棒。這就是我的小提琴現在的樣子，數據和道具，使用'$ index'值https://jsfiddle.net/f5n5z5oo/3/再次感謝 –

希望這可以幫助別人的未來：有這樣做的許多方法，我將更新更多的方法回答，因爲我得到下面的時間是這樣的一種方法：

如果組件已經定義，簡單地使用重要的關鍵字parent定義如下組件實例的父添加組件的一個新實例：檢查codepen

var Child = Vue.extend({ 
    template: '<div>Hello!</div>', 
}); 

new Vue({ 
    el: '#demo', 
    ready: function() { 
    var child = new Child({ 
     el: this.$el.querySelector('.child-host'), 
     parent: this, 
    }); 
    }, 
});

來源

2016-05-04 01:29:50

如何在Vue.js中添加動態組件/部分

回答

相關問題