时间戳

首页 > 解决方案 > 未知的自定义元素：- 您是否正确注册了组件

vue.js - 未知的自定义元素：- 您是否正确注册了组件

问题描述

我是 Vue.js 的初学者，在创建我的第一个组件时遇到了麻烦，我给我的组件起了一个名字，我认为我正确地注册了它，但是我有 未知的自定义元素： - 你正确地注册了组件吗？对于递归组件，请确保提供“名称”选项。错误 。我错过了什么

这是我的FirstComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Title</div>
                    <div class="card-body">
                        Send it from Vue Js
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
name: "firstcomponent",
    mounted() {
     console.log("Component mounted successfully");
    }
}
</script>

<style scoped>

</style>

我的app.js

require('./bootstrap');
import Vue from 'vue';
import FirstComponent from "./components/FirstComponent";

// window.Vue = require('vue');

Vue.component('firstcomponent', require('./components/FirstComponent.vue'));

new Vue({
    el: '#app',
    components: {
        'firstcomponent': FirstComponent
    }
})

还有我的刀

@extends('layouts.app')
@section('content')
    <template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <firstcomponent></firstcomponent>
            </div>
        </div>
    </template>
@endsection

标签： vue.jslaravel-blade

解决方案

在 app.js 中，您应该定义应该从组件中导出哪些内容。使用默认值可以正常工作：

Vue.component('firstcomponent', require('./components/FirstComponent.vue').default);

推荐阅读