javascript - 如何注册自定义Vue组件？

Question

我保证我已经阅读了我能找到的所有相关帖子，但我得到了任何明确的答案(据我所知，但我是 Vue 的新手)。

详细信息:

• 我使用的是 Vue v2.5.15
• 我们正在使用 webpack(我了解到这可能会影响我使用组件的方式)

我正在尝试使用this range slider component 。我尝试按照文档进行操作，但不断收到错误消息 [Vue warn]: Unknown custom element: <vue-slider> - did you register the component correctly? 。我已经尝试阅读文档和可能 20 个不同的帖子，但我仍然没有明白这一点。这基本上是我的 JS 文件中的内容:

<!-- HTML -->
<div id="app">
  <vue-slider
        v-model="sliderRange"
        :min="minPriceBase"
        :max="maxPriceBase"
  ></vue-slider>
</div>

// Javascript
import Vue from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

export default {
  components: {
    VueSlider
  }
}

Vue.component('VueSlider', VueSlider);

var vm = new Vue({
  el: '#app',
  data: {},
  components: {
    VueSlider: window['vue-slider-component']
  }
});

我还通读了 Vue docs on components我不知道我做错了什么。如何正确注册我的组件？

更新:

我发现如果我使用:

components: {
  VueSlider
}

而不是:

components: {
  VueSlider: window['vue-slider-component']
}

然后我就不再收到上面提到的错误了。相反，我收到一条错误消息 [Vue warn]: Invalid prop: type check failed for prop "min". Expected Number, got Boolean 。但你认为这是进步吗？为什么需要`window['vue-slider-component']？

Answer 1

查看文档，我认为您尝试同时执行所有不同的导入变体

  new Vue({
    el: '#app',
    components: {
      VueSlider: window['vue-slider-component']
    }
  })

如果您通过脚本通过添加直接导入，这似乎是访问附加到窗口的组件的建议方式

<script src="./node_modules/vue-slider-component/dist/vue-slider-component.umd.min.js"></script>

(你没有这样做)

还有两种方法，可以使用全局安装组件

// main.js
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

Vue.component('VueSlider', VueSlider)

这将使 vue-slider 可用于应用程序中的所有组件，因此您不必多次导入它。如果这样做，您就不必在本地定义它。最后第三个选项是仅在本地导入:

// App.vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  }
}

这将使 slider 组件仅可用于单个组件。根据您的情况，您可以决定选择选项 1:

import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);

或选项 2:

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  }
}

顺便说一句，您现在看到的错误是您引用的 minPriceBase 不是数字，您必须在实例上设置该数据:

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      minPriceBase: 0,
      maxPricebase: 10
    }
  }
}

请注意，在您的代码中，您将导出粘贴到了 vue 实例之前，您不需要在那里导出任何内容，只需在 vue 实例上定义该组件即可:

import VueSlider from 'vue-slider-component'

var vm = new Vue({
  el: '#app',
  data: {},
  components: {
    VueSlider
  }
});

您应该能够在示例中摆脱它，它不会执行任何操作:

export default {
  components: {
    VueSlider
  }
}