報錯資訊
[Vue warn]: Unknown custom element: <my-cpnc> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
錯誤代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件入門</title>
</head>
<body>
<div id="app">
<my-cpnC></my-cpnC>
</div>
<script src="../js/vue.js"></script>
<script>
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标題</h2>
<p>111哈哈哈</p>
<p>222呵呵呵</p>
</div>`
});
Vue.component("my-cpnC",cpnC);
let vm = new Vue({
el: "#app",
data: {
message: "你好",
},
methods: {
},
computed: {
},
filters: {
}
})
</script>
</body>
</html>
錯誤原因
梅開二度,Vue元件名稱不區分大小寫,不要出現大寫字母,注意注意!!!
修改後代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件入門</title>
</head>
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标題</h2>
<p>111哈哈哈</p>
<p>222呵呵呵</p>
</div>`
});
Vue.component("my-cpn",cpnC);
let vm = new Vue({
el: "#app",
data: {
message: "你好",
},
methods: {
},
computed: {
},
filters: {
}
})
</script>
</body>
</html>