[英]Laravel - How to Import Vue Component to Another Component
I am new in Vue.js .我是Vue.js的新手。 I want to understand on using
component
.我想了解如何使用
component
。 I tried to import my component to another component but it failed.我试图将我的组件导入另一个组件,但失败了。 I am using
Laravel 5.8
.我正在使用
Laravel 5.8
。 Below are the error that I received.以下是我收到的错误。
Module not found: Error: Can't resolve './components/modalAlert.vue
未找到模块:错误:无法解析 './components/modalAlert.vue
Below are my codes.以下是我的代码。
app.js应用程序.js
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',
});
formToDo.Vue formToDo.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>
modalAlert.vue modalAlert.vue
<template>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['id'],
data() {
return {
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
Your components are probably in the same folder.您的组件可能在同一个文件夹中。 In your component formToDo.vue: Change this:
在你的组件 formToDo.vue: 改变这个:
import modalAlert from './components/modalAlert.vue';
To this:对此:
import modalAlert from './modalAlert.vue';
To solve the other issue, as @ambianBeing suggested, your component formToDo.vue must have root element to be able to add child component inside it.为了解决另一个问题,正如@ambianBeing 所建议的那样,您的组件 formToDo.vue 必须具有根元素才能在其中添加子组件。
<template>
<div> <!-- this is the root -->
<modal-alert></modal-alert>
</div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.