<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--vue中驼峰 这里—加小写 -->
<!-- <template-a :content='123'></template-a> -->
<div :is='aaa'></div>
</div>
<script type="text/javascript">
var aaa= {
props: ['content'],
template: "<div>{{content}}</div>"
}
var vm = new Vue({
el: '#app',
components : {
aaa : aaa
}
})
</script>
</body>
</html>
这是我找的资料
当使用DOM作为模板时(例如,将el选项挂载到一个已知的元素上),你会受到HTML的一些限制,因为Vue只有在浏览器解析和标准化HTML后才能获取模板内容。尤其像这些元素<ul>,<ol>,<table>,<select>限制了能被它保过的元素,而一些像option这样的元素只能出现在某些其他元素的内部。
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table>
<my-row>...</my-row>
</table>
自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会出现导致错误。变通的方案是使用特殊的is属性:
这样写不是可以吗
我是哪里错了 为什么会报错
动态组件 名字是component 你写的div