试图了解如何将组件动态渲染到我的父页面中。 我假设我将有一个对象数组,其中每个对象都有一个组件名称和绑定到对象参数的数据字段。这表明如果一个组件在页面上重复两次或更多次,则字段绑定对于组件实例必须是唯一的。
下面我收到一条错误消息:
"[Vue 警告]: 组件缺少模板或渲染函数。at at "
经过数小时的阅读和反复试验,我不得不暂时放弃并寻求帮助。这是我的代码:
default.html
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Agenda to Minutes</title>
<!-- Import Styles -->
<!-- <link rel="stylesheet" href="./assets/styles.css" /> -->
<!-- Import Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
htmlData: {{htmlData}} <br>
this.htmlData: {{this.htmlData}} <br>
<dynamic-one></dynamic-one>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/dynamicOne.js"></script>
<!-- Mount App -->
<script>
app.component('my-dynamic-component',{/* defination */})
const mountedApp = app.mount('#app')
_this = mountedApp;
_this.htmlData = '<div>Hello - {{someVar}}</div>'
</script>
</body>
</html>
我的组件页面
app.component('dynamic-one', {
props: {
templateHtml: {
templateHtml: true,
type: String
}
},
data() {
return {
someVar: 'Test',
htmlData:'xyz'
}
},
template:
/*html*/
<div>
<!-- _this.htmlData: {{_this.htmlData}} -->
dynamicOne : {{this.htmlData}}
<my-dynamic-component :template-html="htmlData" />
</div>,
created() {
this.$options.template = this.templateHtml
}
})
main.js
const app = Vue.createApp({
data() {
return {
htmlData: 'myName'
}
}
})
```