主页 / 问题 / 1223600
Accepted
leocoolguy 0
Asked:2021-12-25 06:08:30 +0000 UTC2021-12-25 06:08:30 +0000 UTC

Vue - 添加组件时出错

  • 772

我正在尝试找出 Vue.js，但在创建组件时遇到了麻烦。我不明白什么是错的，什么是缺失的，但我仍然发现错误：

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

(found in <Root>)

索引.html：

  <!DOCTYPE html>
    <html>
    <head>
        <title>vueTest</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <!--<div class="app">-->
    <!--    <h2>{{ product }}</h2>-->
    <!--    <img :src="path " width="50px" height="50px" class="theIMG" :style="styless">-->
    
    <!--</div>-->
    
    <div id="anAp">
        <myTag></myTag>
    </div>
    
    <!--<button id="theButton">Press</button>-->
    <script src="vue.js"></script>
    <script src="action.js"></script>
    </body>
    </html>

动作.js：

    Vue.component ("myTag",{
        name: 'myTag',
        template: '<p>Hello world!</p>'
    })
    
    new Vue({
        el: '#anAp',
        data: {
    
        }
    
    
    })

请帮我修复它，我是 Vue.js 的新手（（

javascript

1 个回答

  1. Best Answer

    报错说mytag没有找到同名的组件，这意味着你需要处理Vue.

    引用官方指南 -组件命名：

    您为组件指定的名称可能取决于您打算在哪里使用它。当直接在 DOM 中使用组件时（与字符串模板或单文件组件相反），我们强烈建议您遵循W3C 规则来命名自定义标签（全部小写，必须包含连字符）。这将避免与当前和未来的 HTML 元素发生冲突。

    其他建议

    和工作示例：

    Vue.component("my-tag", {
  name: 'myTag',
  template: '<p>Hello world!</p>'
})

new Vue({
  el: '#anAp',
  data: {

  }


})
    <!DOCTYPE html>
<html>

<head>
  <title>vueTest</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="anAp">
    <my-tag></my-tag>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
  <script src="action.js"></script>
</body>

</html>

    • 3

相关问题