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

我在我的项目中使用日期选择器组件。基本用法是这样的：

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

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

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

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

这将默认为fr为了language第三方库的财产。

这是我尝试过的：

• 扩展 Datepicket 组件的自定义组件：不太好，因为我需要定义一个包含原始日期选择器组件的模板。这意味着多余的包装组件
• 一个插件？我只能将属性注入到全局 Vue 实例中。 （对 Vue 还很陌生）
• Mixin 不适用，因为我需要更改第 3 方组件

不确定您如何扩展该组件。但这应该够优雅了吧？

for e.g.

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

demo: https://jsfiddle.net/jacobgoh101/5917nqv8/2/ https://jsfiddle.net/jacobgoh101/5917nqv8/2/

Update针对“需要单文件组件提供模板标签”的问题

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

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

例如这ExtendedDatepicker.js将是一个有效的 Vue 组件

import Datepicker from "vuejs-datepicker";

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

demo: https://codesandbox.io/s/9kn29053r https://codesandbox.io/s/9kn29053r