2 回答

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

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊
下面的代碼片段展示了如何<component :is="dynamicComponent"></component>
工作。
2 個(gè)組件注冊(cè)到
Vue
(全局)單擊按鈕后,
:is
綁定將更新為已注冊(cè)的組件名稱之一單擊按鈕時(shí),組件本身會(huì)向父組件發(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>
添加回答
舉報(bào)