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

Posted 2023-02-23

【中文标题】将属性默认值注入 3rd 方 Vue 组件

【英文标题】：Injecting property defaults into 3rd party Vue component

【发布时间】：2019-03-06 13:41:51

【问题描述】：

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

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

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

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

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

对于第 3 方库的 language 属性，这将默认为 fr。

这是我尝试过的：

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

【参考方案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

【讨论】：

我正在使用相同的代码创建单个文件组件。但是，似乎需要单个文件组件来提供模板标签。即使他们扩展了另一个组件：/

@VincentMimoun-Prat 我已经更新了答案。它应该有帮助