在自定义 Vue.js 组件中导入第三方组件（vue-color）

Posted 2023-02-23

【中文标题】在自定义 Vue.js 组件中导入第三方组件（vue-color）

【英文标题】：Import a Third-Party Component (vue-color) in the custom Vue.js Component

【发布时间】：2019-01-03 02:12:56

【问题描述】：

我最近开始使用 Vue.js，我想创建简单的 TODO 应用程序。但我需要有机会在输入表单中为我的任务选择一种颜色。所以，我找到了一个第三方库vue-color，但我不知道如何将它包含在我的应用程序中，基于webpack模板的下一个结构：

../
  src
    components
      ProjectInput.vue
      ProjectItem.vue
      ProjectList.vue
      ColorPicker.vue
    App.vue
    main.js

组件 ProjectInput 有颜色组件的下一个定义：

<template>
    ...
    <color-picker/>

<script>
  import ColorPicker from './ColorPicker'

  export default 
    components: 
      ColorPicker
    ,
  ...

...以及文档中的一个简单组件 ColorPicker.vue：

<template>
  <div class="input-group color-picker-component">
     <chrome-picker></chrome-picker>
  </div>
</template>
<script>
  import  Chrome  from 'vue-color'
  export default 
   name: 'ColorPicker',
   components: 
     'chrome-picker': Chrome
   ,
 
</script>

渲染 ProjectInput 时返回错误

 [Vue warn]: Error in data(): "TypeError: Cannot read property 'h' of undefined"
 found in
  ---> <Chrome> at src/components/Chrome.vue
   <ColorPicker> at src/components/ColorPicker.vue
     <ProjectInput> at src/components/ProjectInput.vue
       <ProjectList> at src/components/ProjectList.vue
         <App> at src/App.vue
           <Root>

我尝试了不同的方法。我尝试在 main.js 中导入 vue-color 并使用 Vue.use(VueColor) 以便在 ProjectInput 中创建组件，如 var Chrome = VueColor.Crome 但它返回一个错误 VueColor 未定义

如何正确导入？

【参考方案1】：

vue-color 组件找不到初始颜色。您应该提供v-model 或:value/@input：

new Vue(
  el: "#app",
  components: 
     ChromeColor: VueColor.Chrome
  ,
  data: 
    color: '#ff00ff'
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-color/2.4.6/vue-color.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <chrome-color v-model="color"></chrome-color>
</div>

【讨论】：

哦，谢谢！是的，你说得对，我错过了 v-model。现在它就像我想要的那样工作。