本文介绍了从第三方库扩展 vue.js 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 element-ui 中的组件 ElDatepicker,我想更改它的模板和事件处理程序方法.我正在尝试在单个文件组件中做这样的事情:
I'm using component ElDatepicker from element-ui and I want to change it's template and event handler method.I'm trying to do something like this in single file component:
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
extends: ['ElDatePicker']
}
但它不起作用.怎么改?
But it doesn't work. How i can change it?
https://github.com/ElemeFE/element/tree/dev/packages/date-picker - 组件包
推荐答案
您的主要问题是 extends 应该指定单个组件而不是数组.您应该引用组件而不是名称.
Your main problem is that extends should specify a single component and not an array. You should reference the component and not the name.
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
export default {
extends: ElDatePicker
}
您发布的 repo 来自 element-ui
The repo you posted is from 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
}
这篇关于从第三方库扩展 vue.js 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!