组件Vue.Js不工作。未知的自定义元素：<>

Question

我有一个错误：

Vue警告:未知的自定义元素：<image-upload> -您正确注册了组件吗？对于递归组件，请确保提供"name“选项。

In myApp.js I添加:

Vue.component('image-upload',require('./components/ImageUpload.vue').default);

在ImageUpload.Vue中，我有以下代码：

<script>
    import Croppie from 'croppie'

    export default {
        props: ['imgUrl'],
        mounted() {
            this.image = this.imgUrl
            this.setupCroppie()
        },
        data() {
            return {
                croppie: null,
                image: null
            }
        },
        methods: {
            setUpCroppie() {
                let el = document.getElementById('croppie')
                this.croppie = new Croppie(el, {
                    viewport: {width: 200, height: 200, type: 'circle'},
                    boundary: {width: 220, height: 220},
                    showZoomer: true,
                    enableOrientation: true
                })
                this.croppie.bind({
                    url: this.image
                })
            },
        }
    }
</script>
<template>
    <div class="image-upload-wrapper image-upload">
        <p>this is my component</p>
        <div id="croppie"></div>
    </div>
</template>

刀片：

<image-upload img-url="{{url('img/user.png')}}"></image-upload>

我跟踪这里的医生使用CroppieJs https://foliotek.github.io/Croppie/

谢谢..

Answer 1

您是否尝试将a:添加到vue组件中。

<image-upload :img-url="{{url('img/user.png')}}"></image-upload>

Vue组件是否出现在Vue.js检查器中？

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd