1 回答

TA貢獻1780條經(jīng)驗 獲得超5個贊
問題是,你的主 Vue 有一個模板 - 這會替換目標元素內(nèi)的任何 HTML
因此,您可以component-x在新的 Vue 構(gòu)造函數(shù)模板中添加:
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working<component-x></component-x></div>`,
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="./js/test.js"></script>
或者您可以從新的 Vie 構(gòu)造函數(shù)中刪除 template: ,并且將使用目標元素的現(xiàn)有內(nèi)容
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div">
Vue is working
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
添加回答
舉報