时间戳

首页 > 解决方案 > 尽管模仿了一个工作组件，但 VueJS 给了我一个“未知的自定义元素”错误

javascript - 尽管模仿了一个工作组件，但 VueJS 给了我一个“未知的自定义元素”错误

问题描述

我启动了一个小型 vueJS 应用程序。它只是一个 .html 文件和一个 .js 文件。在 HTML 中，我链接到 JS 文件以获取我的 Vue 组件。据我所知，该组件的一切似乎都处于正常工作状态：我从字面上复制了从教程中复制的另一个组件的形式。所以它应该工作，但它没有，或者至少我不知道为什么它不应该工作。

这是我的代码。的HTML：

// this is in main_step09.js
Vue.component('headline-roly', {
  props: ['title', 'body', 'date'],
  template: `
        <div>
            <h1>Today's Headline: {{ title }}</h1>
            <p>{{ body }}</p>
            <h6>Reported on: {{ date }}</h6>
        </div>
    `
});

new Vue({ el: '#root' })
<!-- actually in <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css">

<div id="root" class="container">
  <headline-roly title="In The News" body="lorem ipsum" date="10/16/2019"></headline-roly>
  <headline-roly title="This Just In" body="CTV News reporting" date="12/20/2019"></headline-roly>
  <headline-roly title="Spider-Man!" body="The daily bugle" date="01/16/3019"></headline-roly>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<!-- this is where main_step09.js is included in the actual code
<script src='main_step09.js'>


</script>
-->

我看不出我做错了什么。它甚至可以在 JS Fiddle 中使用：https ://jsfiddle.net/j15x32fp/

但是在浏览器中我得到了错误：

“[Vue 警告]：未知自定义元素：<headline-roly> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。”

有人帮忙吗？

标签： javascriptvue.js

解决方案

您的脚本不知道 a是什么，headline-roly因为您注释掉了 定义的<script>标签。main_step09.jsheadline-roly

推荐阅读