全局注册单个文件组件

Question

我将直接切入正题，我正在使用 VUEJS 创建一个注册表单。但是，当我尝试全局注册组件时，它给了我错误。请耐心等待，我还是 vuejs 的新手。

当我检查控制台时，它给了我这个错误：

n 不是函数

在此先感谢您的帮助。

这是我的代码：

index.php 文件

<section id="app" class="homepage">
   <div class="content">
    <?php
        $this->load->view($content);
    ?>
   </div>
</section>

<script src="<?php echo base_url(); ?>/js/vue.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/vue-resource.min.js" ></script>
<script src="<?php echo base_url(); ?>/js/app.js" ></script>

app.js 文件

Vue.component("tour-form", './components/tourForm.vue');

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

Tour_form.php 文件

<tour-form></tour-form>

Answer 1

Vue.component()将组件选项（一个对象{}）作为其第二个参数

但是您将 vue 组件的路径作为字符串传递。

由于您正在使用.vue文件，因此您可能会使用它们vue-loader来解析这些文件。

vue-loader 将组件转换为纯 JavaScript 模块。

因此导入组件并将其作为第二个参数传递

import TourForm from './components/tourForm.vue'

Vue.component("tour-form", TourForm);

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