在 Laravel 中定义 vue 组件

Question

我正在使用 VueJS 在视图中加载我的数据（使用 Laravel）。我确实在 app.js 文件中注册了我的组件，当我想在我的一个刀片文件中使用它们时，它给了我这个错误：

（未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。）

我的 app.js 文件：

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));

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

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
   'passport-authorized-clients',
   require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
   'passport-personal-access-tokens',
   require('./components/passport/PersonalAccessTokens.vue')
);

Vue.component('employer-enquiry-names', 
require('./components/Employer/Enquiry/Edit/Names.vue'));
Vue.component('employer-enquiry-users', 
require('./components/Employer/Enquiry/Edit/Users.vue'));
Vue.component('employer-enquiry-employer', 
require('./components/Employer/Enquiry/Edit/Employer.vue'));

在这里我使用了我的组件：

<div class="tab-content" id="enquiry_tabs">
   <employer-enquiry-employer ref="employer_enquiry_employer">

  </employer-enquiry-employer>

  <employer-enquiry-users ref="employer_enquiry_users">
  </employer-enquiry-users>

  <div class="tab-pane fade" id="names">
       <employer-enquiry-names ref="employer_enquiry_names" >
        </employer-enquiry-names>
   </div>
 </div>



 <script>
     var vm = new Vue({ el: '#enquiry_tabs' });
     vm.$refs.employer_enquiry_employer.loadData();
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
         var activatedTab = e.target; // activated tab
         if (activatedTab.id == "names_link") {
            vm.$refs.employer_enquiry_names.loadData();
         } else if (activatedTab.id == "users_link") {
            vm.$refs.employer_enquiry_users.loadData();
         } else if (activatedTab.id == "employer_link") {
             vm.$refs.employer_enquiry_employer.loadData();
         }
      });
  </script>

谁能帮我解决这个问题？

Answer 1

在实例化你的根 vue 实例之前注册 vue 组件

    require('./bootstrap');

// register components

Vue.component('example', require('./components/Example.vue'));

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
   'passport-authorized-clients',
   require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
   'passport-personal-access-tokens',
   require('./components/passport/PersonalAccessTokens.vue')
);

Vue.component('employer-enquiry-names', 
require('./components/Employer/Enquiry/Edit/Names.vue'));
Vue.component('employer-enquiry-users', 
require('./components/Employer/Enquiry/Edit/Users.vue'));
Vue.component('employer-enquiry-employer', 
require('./components/Employer/Enquiry/Edit/Employer.vue'));

//instantiate root vue instance

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

注意：不要在body 元素上挂载root vue 实例。最好创建一个带有一些 id 的包装器元素，例如 #app 并将 vue 实例安装在这个包装器元素上。

在会产生警告的 vue 2.0 中不建议这样做。见release notes