注入属性默认为第三方组件的Vue(Injecting property defaults into

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

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

这里有几个属性将得到每一个我们需要使用日期选择器时，重复： language的实例。

所以我想能够简单地做，当需要一个日期选择器。

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

这将默认为fr的language第三方库的性能。

这是我曾尝试：

• 它扩展了Datepicket成分的自定义组件：不是很大，因为我需要定义包含原来的日期选取器组件的模板。 这相当于一个多余的包装部件
• 一个插件？ 我只能注入性质全球Vue的实例。 （漂亮的新的Vue）
• 混入不适用，因为我需要改变第三方组件

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

文章来源: Injecting property defaults into 3rd party Vue component