我有兩個名為 component-1 和 component-2 的組件，以及這個 vue.js 代碼：
<template>
<div id="app">
<input class="input" @keyup="update()">
<div class="render"></div>
</div>
</template>
<script>
export default {
methods:{
update () {
document.querySelector(".render").innerHTML=`<component-${
document.querySelector(".input").value
} />`
}
}
}
</script>
每當我運行代碼時，組件都不會呈現。有沒有辦法讓這個組件渲染？
uj5u.com熱心網友回復：
這不是動態渲染組件的正確方法Vue- 相反，您應該使用:is
<template>
<div id="app">
<input class="input" @keyup="update($event.target.value)">
<component :is="myComponent"></component>
</div>
</template>
<script>
export default {
data() {
return {
myComponent: undefined
}
},
methods:{
update (component) {
this.myComponent = component
}
}
}
</script>
沙盒演示在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/401771.html
標籤：javascript Vue.js 动态的 后端 Vuejs3