运行我的代码时出现 Vue 错误：未知的自定义元素答案

【问题标题】：Vue error when run my code: unknown custom element运行我的代码时出现 Vue 错误：未知的自定义元素
【发布时间】：2021-12-12 14:24:18
【问题描述】：

我是非常初学者的网络开发人员。我尝试制作 CRUD。我有 Laravel 和 Vue 项目。我安装https://www.tutsmake.com/laravel-vue-js-datatables-example-tutorial/

我需要添加到我的项目数据表中。

我的文件带有数据表：Note.vue:

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>

          <div class="card-body">
            <datatable :columns="columns" :data="rows"></datatable>
            <datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';

export default {
  components: { VuejsDatatableFactory },
  mounted() {
    console.log('Component mounted.')
  },
  data(){
    return {
      datatTableUrl:  Vue.prototype.$apiAdress,
      columns: [
        {label: 'id', field: 'id'},
        {label: 'Name', field: 'name'},
        {label: 'Email', field: 'email'}
      ],
      rows: [],
      page: 1,
      per_page: 10,
    }
  },
  methods:{
    getUsers: function() {
      axios.get(this.datatTableUrl).then(function(response){
        this.rows = response.data;
      }.bind(this));
    }
  },
  created: function(){
    this.datatTableUrl = this.datatTableUrl+'/api/users/dataTable'+ '?token=' + localStorage.getItem("api_token");
    this.getUsers()
  }
}
</script>

和 App.vue：

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
  // Import Main styles for this application
  @import 'assets/scss/style';
</style>

<style scoped>
.invalid input,
.invalid textarea,
.invalid select,
.invalid checkbox,
.invalid .cke_chrome {
  border: 1px solid red !important;
}

</style>

运行代码时出现错误：

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

found in

---> <Notes> at src/views/notes/Notes.vue
       <Anonymous>
         <CWrapper>
           <TheContainer> at src/containers/TheContainer.vue
             <App> at src/App.vue
               <Root>

Show 91 more frames
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <datatable-pager> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Notes> at src/views/notes/Notes.vue
       <Anonymous>
         <CWrapper>
           <TheContainer> at src/containers/TheContainer.vue
             <App> at src/App.vue
               <Root>

Notes.vue?50c2:27 Component mounted.

怎么了？

请帮帮我:)

【问题讨论】：

你在哪里注册datatable和datatable-pager？

标签： javascript laravel vue.js

【解决方案1】：

如果您在组件中使用组件（类似于 DOM），则必须全局注册这些组件：

例如：

vue.component("MyComponent", MyComponent)

这应该可以解决您的问题！

【讨论】：