添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

一.报错截图

[Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
</head>
    <div id="app">
        <wzwZihello></wzwZihello>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    // 自定义局部组件:临时使用
    const wzwHello = {
        template:"<div>大哥你好,我叫{{name}}</div>",
        data(){
            return {
                name:"wzw"
    // 父组件:新建Vue
    const app = new Vue({
        el:"#app",
        components:{
            wzwZihello:wzwHello
</script>
</html>

二.分析可能的原因

import语句导入组件时from后面的路径写错

注册组件时括号内的组件名称写错,与import声明的不一致

注册组件关键字components写错导致无法使用

使用组件时名称写错,与注册组件的名字不一致

使用组件时没有使用 / 反斜杠结尾

标签中包含大写

三.解决方案(我的问题代码)

标签中包含大写