2 回答

TA貢獻1869條經驗 獲得超4個贊
Nuxt 通常僅包含 Vue 運行時(不包括編譯器)作為優(yōu)化,可將構建大小減少約 10KB,因為大多數用戶使用預編譯模板(例如,通過單個文件組件)。Vue 僅運行時構建會在運行時使用 in-DOM 或字符串模板時發(fā)出您觀察到的警告。
由于您的應用程序在運行時需要字符串模板,因此您需要配置 Nuxt 以使用包含編譯器的 Vue 構建:
// nuxt.config.js
export default {
? build: {
? ? extend(config) {
? ? ? config.resolve.alias.vue = 'vue/dist/vue.common'
? ? }
? },
}

TA貢獻1893條經驗 獲得超10個贊
下面的代碼片段展示了如何<component :is="dynamicComponent"></component>
工作。
2 個組件注冊到
Vue
(全局)單擊按鈕后,
:is
綁定將更新為已注冊的組件名稱之一單擊按鈕時,組件本身會向父組件發(fā)出事件
Vue.component('Comp1', {
template: `
<div>
COMPONENT 1<br />
<button
@click="() => $emit('clicked', 1)"
>
Click 1
</button>
</div>
`
})
Vue.component('Comp2', {
template: `
<div>
COMPONENT 2<br />
<button
@click="() => $emit('clicked', 2)"
>
Click 2
</button>
</div>
`
})
new Vue({
el: "#app",
data() {
return {
dynamicComponent: 'Comp1'
}
},
methods: {
toggleComponent() {
if (this.dynamicComponent === 'Comp1') {
this.dynamicComponent = 'Comp2'
} else {
this.dynamicComponent = 'Comp1'
}
},
handleClicked(id) {
console.log('click in comp', id)
}
},
template: `
<div>
<button
@click="toggleComponent"
>
SWITCH COMPONENT
</button>
<br />
<component
:is="dynamicComponent"
@clicked="(id) => handleClicked(id)"
></component>
</div>
`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
添加回答
舉報