看下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app1">
<myTSemplate></myTSemplate>
</div>
<script>
var myTSemplate = {
template:
"<h3>a</h3>"
};
var app1 = new Vue({
el: "#app1",
components: {
myTSemplate
}
});
</script>
</body>
</html>
看起来好像没什么,但是运行报错:
vue.js:634 [Vue warn]: Unknown custom element: <mytsemplate> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
找来找去,最终发现问题所在:注册组件时要是小写,比如上述代码,修改两种方式
一,myTSemplate改成mytsemplate 全部换成小写
二,注册时,给别名
<div id="app1">
<mytemplate></mytemplate>
</div>
<script>
var myTSemplate = {
template:
"<h3>a</h3>"
};
var app1 = new Vue({
el: "#app1",
components: {
'mytemplate':myTSemplate
}
});
</script>