Laravel 中显示 vueJs 组件的问题

Question

我在我的 laravel 刀片中使用 VueJs。 我将组件定义为在其中一个组件中用作子组件，现在未定义组件。

app.js 中定义的组件

Vue.component('phoneSearch', require('./components/admin/booking/PhoneSearch').default);

我的组件代码：

 <template> </template> <script> export default { name: "phone-search" } </script> <style scoped> </style>

以及我想要调用 child 的父组件：

 <template> </template> <script> export default { name: "add-passenger", components: { phoneSearch }, } </script> <style scoped> </style>

最后我在运行后在控制台中得到了这个错误：

Uncaught ReferenceError: phoneSearch is not defined
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/admin/booking/AddPassenger.vue?vue&type=script&lang=js& (app_admin.js:7878)
at __webpack_require__ (app_admin.js:20)
at Module../resources/js/components/admin/booking/AddPassenger.vue?vue&type=script&lang=js& (app_admin.js:144061)
at __webpack_require__ (app_admin.js:20)
at Module../resources/js/components/admin/booking/AddPassenger.vue (app_admin.js:144025)
at __webpack_require__ (app_admin.js:20)
at Object../resources/js/app_admin.js (app_admin.js:141625)
at __webpack_require__ (app_admin.js:20)
at Object.1 (app_admin.js:144544)
at __webpack_require__ (app_admin.js:20)

任何人都可以帮助我吗？

Answer 1

正如@ashutosh 所提到的，您需要导入该组件来注册它：

 <template>
  <div>
    <phoneSearch />
  </div>
</template>

<script>
    import phoneSearch from './your-directory/your-component.vue';

    export default {
        name: "add-passenger",
        components: {  phoneSearch },
    }
</script>

<style scoped>

</style>

Answer 2

您需要在父组件中本地导入子组件才能显示它

 <template>
    <div>
       <your-component></your-component>
    </div>
 </template>

 <script>
      import yourComponent from './components/child-component.vue';

      export default {
                 components: {  yourComponent },
               }
 </script>

希望它会帮助你