Question

我在项目中使用了日期选择器组件。基本用法如下：

date-picker(language="fr" v-model="date")

每次需要使用日期选择器时，都有几个属性会重复出现：例如language。

因此，我希望能够在需要日期选择器时简单地做到这一点。

date-picker(v-model="date")

第3方库的fr属性的默认值为language。

这是我尝试过的：

一个扩展Datepicket组件的自定义组件：不太好，因为我需要定义一个包含原始日期选择器组件的模板。转化为多余的包装器组件
插件？我只能将属性注入到全局Vue实例。（对Vue来说还很新）
Mixin并不适用，因为我需要更改第三方组件

Answer 1

不确定如何扩展组件。但这应该足够优雅吗？

例如

Vue.component("extended-datepicker", {
  extends: vuejsDatepicker,
  props: {
    format: {
      default: "yyyy MMM(MM) dd"
    },
    language: {
        default: fr
    }
  }
});

演示：https://jsfiddle.net/jacobgoh101/5917nqv8/2/

更新，用于“需要单个文件组件才能提供模板标记”的问题

Vue组件本质上是具有某些属性的JavaScript对象。

您不必总是使用.vue单个文件组件。在这种情况下，您只需创建一个导出对象的.js文件即可。

例如该ExtendedDatepicker.js将是有效的Vue组件

import Datepicker from "vuejs-datepicker";

export default {
  extends: Datepicker,
  props: {
    format: {
      default: "yyyy MMM(MM) dd"
    }
  }
};

演示：https://codesandbox.io/s/9kn29053r

将属性默认注入第三方Vue组件

1 个答案: