从第三方库扩展 vue.js 组件答案

【问题标题】：Extend vue.js component from third-party library从第三方库扩展 vue.js 组件
【发布时间】：2017-06-22 07:23:00
【问题描述】：

我正在使用 element-ui 中的组件 ElDatepicker，我想更改它的模板和事件处理程序方法。我正在尝试在单个文件组件中做这样的事情：

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
    extends: ['ElDatePicker']
}

但它不起作用。怎么改？

https://github.com/ElemeFE/element/tree/dev/packages/date-picker - 组件包

【问题讨论】：

是的，我需要更改它的功能，但我不知道如何
这能回答你的问题吗？ How do I extend another VueJS component in a single-file component? (ES6 vue-loader)

标签： javascript vuejs2 vue.js

【解决方案1】：

您的主要问题是 extends 应该指定单个组件而不是数组。您应该引用组件而不是名称。

import Vue from 'vue';
import ElDatePicker from 'element-datepicker'

export default {
  extends: ElDatePicker
}

您发布的 repo 来自 element-ui

做npm install element-ui

然后：

import { DatePicker } from 'element-ui'
export default {
  // Use mixins for array syntax
  mixins: [DatePicker]
  // OR use extends without array
  extends: DatePicker
}

【讨论】：

【解决方案2】：

您必须首先使用 npm install element-ui 在您的项目中安装 Element UI。然后你必须编辑你的 main.ts/main.js 文件并添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这应该可以解决您的问题。如需更多帮助，请查看Element UI

【讨论】：