Question

我已经创建了这个组件

xyz.vue：

<template>
    <button>
         button template
    </button>
</template>

我正在尝试像这样在组件javascript中使用它：

vue.component('new-comp',xyz);
new Vue({el:'#app'})

这不是通过vue应用中的xyz.vue创建按钮。

Answer 1

您必须导出xyz.vue，以下是xyz.vue组件

<template>
<button>
     button template
</button>
</template>
<script>
   export default{
        data(){
          return{
             "your variables":"their values"
          },
        methods:{},
        computed:{}
 }
</script>

在组件js中，您必须在xyz.vue组件上方导入。假设下面是您的main.js文件（如果我们提到 Vue.component（'componenet-name'，component），我们将在全球范围内制作我们的组件）

import 'componentname' from './yourpath-to-xyz-file/xyz.vue'

Vue.component('global-component',componentname) //same name as imported

现在您可以在任意位置使用“ global-component”（因为它是全局组件，因此您无需像导入单个（最好是本地）文件组件那样进行导入）

importing exporting single file components

vuejs global components

如何使用Vue.component（）创建组件

1 个答案: