Sup人!Vue實例內的Vue實例
我這裏得到這個HTML代碼:
// index.html
<div data-init="component-one">
<...>
<div data-init="component-two">
<button @click="doSomething($event)">
</div>
</div>
,如果我理解正確的這一切基本上引用了另一個Vue的實例裏面Vue的實例。相應的JS代碼在兩個文件分割,看起來像這樣:現在
// componentOne.js
new Vue(
el: '[data-init="component-one"]',
data: {...},
methods: {...}
);
// componentTwo.js
new Vue(
el: '[data-init="component-two"]'
data: {...}
methods: {
doSomething: function(event) {...}
}
);
,這個問題是,doSomething
從componentTwo
不會被調用。
但是,當我做一些內聯的東西,如{{ 3 + 3 }}
,它得到它應該像計算。所以Vue知道有什麼。並且它還會在頁面加載時刪除@click
元素。
我也嘗試過與inline-template
一起擺弄,但它並不像我預期的那樣在這種情況下工作。而且我認爲它不適合這種情況,所以我再次放棄它。
這裏的正確方法是什麼?我怎樣才能使這項工作成爲現在最簡單的方式?
我們使用的Vue版本是2.1.8
。
乾杯!
不確定,如果它可以幫助,但你試圖通過「components:[childcomponent]」添加子組件? –
我想知道爲什麼你有2個Vue實例,而不是創建一個主實例和一個組件,它們會更適合你的情況。 如果你創建componentTwo作爲一個真實的組件,那麼你可以從child到root intance發出事件並在那裏捕獲它。 –
也許你應該使用componentOne.vue和componentTwo.vue來代替。閱讀https://vuejs.org/v2/guide/components.html – ytbryan