Question

我创建了一个全局组件，我想在我的代码中快速测试。但VueJS抱怨该组件未注册。我想当我创建如下组件时，这应该已经有效了吗？

我用于测试BULMA CSS框架并复制并粘贴了我想要测试的组件。所以在我将使用的HTML代码中：

<div id="app">
    <message title="Hello world" body="test"></message>
</div>

我得到的错误是：

未知的自定义元素： - 您是否注册了该组件是否正确？对于递归组件，请确保提供“名称” 选项。

Vue.component('message', {
    props: ['title', 'body'],
    template: `
<article class="message">
            <div class="message-header">
                <p>{{title}}</p>
                <button class="delete"></button>
            </div>
            <div class="message-body">
                {{body}}
            </div>
        </article>`
});

var app = new Vue({
    el: '#app',
    data: {
        responders: [],
        incidents: []
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: { (...)

https://jsfiddle.net/2re6qv6h/#&togetherjs=BnB0KhQdLU

更新

代码嵌入在我的laravel代码中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MEDIFAKTOR - @yield('title') </title>
    <link rel="stylesheet" href="css/vendor.css" />
    <link rel="stylesheet" href="css/app.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>
</head>
<body>

  <!-- Wrapper-->
    <div id="wrapper">
        <!-- Navigation -->
        @include('layouts.navigation')
        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Page wrapper -->
            @include('layouts.topnavbar')
            <!-- Main view  -->
<div id="app">
    <my-message title="Hello world" body="test"></my-message>
</div>

            <!-- Footer -->
            @include('layouts.footer')
        </div>
        <!-- End page wrapper-->
    </div>
    <!-- End wrapper-->
  @section('scripts')
@show
</body>
<script src="js/app.js" type="text/javascript"></script>
</html>

完整的VueJS代码

Vue.component('my-message', {
    props: ['title', 'body'],

    data() {
        return {
            isVisible: true
        };
    },

    template: `
<article class="my-message" v-show="true">
            <div class="message-header">
                <p>{{title}}</p>
                <button type="button" @click="hideModal">x</button>
            </div>
            <div class="message-body">
                {{body}}
            </div>
        </article>`,

    methods: {
        hideModal() {
            this.isVisible = false;
        }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        responders: [],
        incidents: []
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: {
        getIncidents: function() {
            console.log('getIncidents');
            var self = this;
            this.$http.get('/api/v1/incidents').then(function(response) {
                // set data on vm
                console.log(response.data);
                var incidentsReceived = response.data.data.map(function (incident) {
                    return incident;
                });
                Vue.set(self, 'incidents', incidentsReceived);
            });
        }
    }
});

Answer 1

尝试将文章的班级名称<article class="message">更改为<article class="my-message">

Answer 2

根据您使用的Laravel版本，它已经附带了Vue，并将其直接附加到窗口。我的猜测是你的应用程序正在运行，并且Laravel实例正在覆盖Vue引用，而你没有注册你的组件。当然，请删除html <script src="js/app.js" type="text/javascript"></script>中的底部脚本标记。

看起来您正在注册您的组件就好了。如果有的话，您可以将is=""属性添加到组件中，以明确告诉它它是哪个组件。如果你把它称为my-message，它有点多余，但它确实为人们提供了一些清晰度，它是一个Vue组件。最终，这将取决于您和您的团队的离题。

Answer 3

经过一个又一个小时的反复搜索，我终于发现问题出在Chrome无法更新app.js文件。在浏览器中进行一次强制刷新，这样可以消除错误。如果您愿意，请尝试disabling browser cache completely。

VueJS组件注册

3 个答案: