Vue警告：未知的自定义元素

Posted 2023-02-23

【中文标题】Vue警告：未知的自定义元素

【英文标题】：Vue warning: Unknown custom element

【发布时间】：2017-12-22 01:43:54

【问题描述】：

我遇到了这个错误

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

我的 add-video.blade.php

        <div class="panel panel-default">
        <div class="panel-heading">Add Video!</div>
        <div class="panel-body">
        <addVideo></addVideo>
    </div>

添加视频.vue

 <template lang="html">
  //template codes
</template>

<script>
export default 

  data()

    return 
      errors:[],
      video : 
        name : '',
        rate : '',
        year : '',
        description : '',
        creator : '',
        director : '',
        writers : '',
        storyline : '',
        isMovie : '',
        season : ''
      
    


  ,

  created()
    this.fetchVideos();
  ,

  methods:
    fetchVideos()
      axios.get('videos').then(response=>

        this.video = response.data.video;
      );

    ,
    addVideo()

      axios.post('videos',this.videos).then(response =>
        this.videos.push(response.data.video);
        this.video = 
          name : '',
          rate : '',
          year : '',
          description : '',
          creator : '',
          director : '',
          writers : '',
          storyline : '',
          isMovie : '',
          season : ''
        ;
        console.log(response.data);
      ,response=>
          this.errors=response.data;
      );

    

  





</script>

<style lang="css">
</style>

app.js

import Vue from 'vue';
import Users from './components/Users.vue';
import Register from './components/Register.vue';
import addVideo from './components/addVideo.vue';




window.axios = require('axios');


const app = new Vue(
    el: '#app',
    components :  Users,Register,addVideo 
);

Laravel 5.4 项目。我为不同的组件编写了相同的代码。相同的代码适用于其他组件。我认为没有语法错误。但我没有发现我的错误。我希望分享的代码对你有帮助。

【问题讨论】：

试试这个import AddVideo from './components/addVideo.vue'; Vue.component('addVideo',AddVideo)，其他人也一样const app = new Vue( el: '#app', components : //nothing here );

我不这么认为。我试过 Vue.component('addVideo',require('./components/addVideo.vue')) 但没有用。@Cristy

@more 我认为您在代码的其他地方添加了 <addvideo> 而不是 <addVideo>

【参考方案1】：

其实html标签是不区分大小写的，一切都降低了。请改用连字符表示法，以便在您的模板中拥有与 addVideo 等效的符号（只要它在 .php 或 .html 文件中）：

<add-video></add-video>

【讨论】：

这也是我脑海中闪现的第一件事