Question

我在VueJS中遇到了寄存器组件的问题。我使用npm install安装了https://github.com/wanxe/vue-button-spinner的组件。接下来，我将代码添加到我的app.js（我正在使用Laravel 5.5）。

我的app.js文件

require('./bootstrap');

window.Vue = require('vue');
import Spinner from './components/Spinner.vue'

window.onload = function () {

    Vue.component('button-spinner', require('./components/Spinner.vue'));
    var vw = new Vue({
        el: '#app',
        components: {
            'button-spinner': Spinner
        }
    });

};

和Spinner.vue代码

<script>
    import VueButtonSpinner from 'vue-button-spinner';

    console.log('Test');

    export default {
        name: 'events-form',
        data() {
            return {
                isLoading: false,
                status: '',
            }
        },
        components: {
            VueButtonSpinner
        },
        methods: {
            onSubmit() {
                this.isLoading = true
                $someRequest('/url', 'GET')
                    .then(response => {
                        this.isLoading = false
                        this.status = true // or success
                        setTimeout(() => { this.status = '' }, 2000) // to clear the status :)
                    })
                    .catch(error => {
                        console.error(error)
                        this.isLoading = false
                        this.status = false //or error
                    })
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

在此之后我运行npm run dev 接下来，我将代码添加到我的HTML

<div id="app">
 <button-spinner
                        :isLoading="isLoading"
                        :disabled="isLoading"
                        :status="status">
                <input type="submit" :disabled="submitted" :class="{ 'disabled': submitted == true }" @click="submit('register', $event)"
                       v-model="registerSubmit" id="registerSubmit" style="width: 100%; height: 40px">
                </button-spinner>

</div>
<script src="{{URL::asset('js/app.js')}}"></script>

组件无效。我不知道为什么。控制台打印Unknown custom element: <button-spinner>

编辑：

我在window.onload = function ()工作后从app.js中删除了console.log('Component mounted.')，但是从Spinner我获得了[Vue warn]: Failed to mount component: template or render function not defined.found in---> <ButtonSpinner> at resources/assets/js/components/Spinner.vue<Root>

删除window.onload之后还有另一个问题我还链接了html中的其他js文件

<script src="{{URL::asset('js/login.js')}}"></script>
<script src="{{URL::asset('js/register.js')}}"></script>

这个脚本使用VueJS并且会产生很多错误。

window.onload一切正常。我应该在app.js中包含此文件吗？例如。 register.js档https://pastebin.com/0uHxRcN9

更新后的

app.js：

window.Vue = require('vue');


require('./bootstrap');

import Spinner from './components/Spinner.vue'

    require('./register');
    require('./login');
   new Vue({
        el: '#app',
        components: {
            'button-spinner': Spinner
        }
    });

Answer 1

您双向创建了组件

删除此

Vue.component('button-spinner', require('./components/Spinner.vue'));

并在此处更改

components: {
    buttonSpinner: Spinner
}

同样将html置于组件内部将无效，因为您放置input，删除此

<input type="submit" :disabled="submitted" ....

还可以使用props在子组件中传递参数

props = ["isLoading","disabled","status"]

并在主要组件中使用define

isLoading: false,
status: '',

Answer 2

当您内联注册组件时，Vue似乎使用了将ComponentName转换为component-name的功能。您可以通过更改“导入别名”轻松解决您的问题到ButtonSpinner

import ButtonSpinner from './components/Spinner.vue'

//in the components property 
components: {
   ButtonSpinner
}

VueJS注册组件错误未知的自定义元素

2 个答案: