Laravel-如何将Vue组件导入到另一个组件

时间:2019-10-19 05:48:46

标签: javascript html vue.js

我是 Vue.js 中的新手。我想了解如何使用Error performing 'single click - At Coordinates: 1457, 1213 and precision: 16, 16' on view 'with id: com.test:id/go_to_next'.。我试图将我的组件导入另一个组件,但是失败了。我正在使用component。以下是我收到的错误。

  

未找到模块:错误:无法解决   './components/modalAlert.vue

下面是我的代码。

app.js

Laravel 5.8

formToDo.Vue

Vue.component('form-to-do', require('./components/formToDo.vue').default);
Vue.component('modal-alert', require('./components/modalAlert.vue').default);

const app = new Vue({
    el: '#app',
});

modalAlert.vue

<template>
// form 

<modal-alert></modal-alert>
</template>

<script>
import modalAlert from './components/modalAlert.vue';

export default {
    components: {
       'modal-alert': modalAlert 
    },

    data() {
        return {
            setErrors: [],
            tasks: [],
            task: {
                id: '',
                name: '',
                completed: '',
                date_completed: ''
            },
            result: '',
            input: {
                name: ''
            }
        };
    },
}
</script>

1 个答案:

答案 0 :(得分:3)

您的组件可能位于同一文件夹中。在组件formToDo.vue中: 更改此:

import modalAlert from './components/modalAlert.vue';

对此:

import modalAlert from './modalAlert.vue';

要解决另一个问题,如@ambianBeing所建议,您的组件formToDo.vue必须具有root元素才能在其中添加子组件。

<template>
<div> <!-- this is the root -->
    <modal-alert></modal-alert>
</div>
</template>