时间戳

首页 > 解决方案 > 无法使用 vue.js 全局注册自定义组件

vue.js - 无法使用 vue.js 全局注册自定义组件

问题描述

我已经制作了选择框组件，并希望在其他组件中重用它。Si 我想在全球范围内注册该组件。我已经在 main.js 中导入了该组件，但不起作用。

main.js

import Selectbox from "@/modules/Selectbox.vue";
Vue.component("Selectbox", Selectbox);

选择框.vue

<template>
  <div>
    <label>{{ label }}</label>
    <select @change="$emit('input', $event.target.value)">
      <option
        v-for="opt in options"
        :key="opt.value"
        :value="opt.value"
        :selected="value === opt.value"
      >
        {{ errorMessage }}
        {{ opt.label || "No label" }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      errorMessage: "",
      option: "lorem",
      options: [
        { label: "lorem", value: "lorem" },
        { label: "ipsum", value: "ipsum" }
      ]
    };
  },
};
</script>

测试.vue

<template>
<div>
<Selectbox v-model="ward_no"/>
</div>
</template>
<script>
export default {
  data() {
   return {
     ward_no: '',
        };
     }
   }
</script>

标签： vue.js

解决方案

您尝试注册全局组件但缺少script标签的方式没有任何问题。

更新：在Skype上与@prabinasht交谈并查看她的代码后，我看到在多个文件中她忘记删除本地导入/注册的组件，同时该组件也在全球注册，所以这就是问题所在。

推荐阅读