如何将选项传递给自定义 vue 组件？

Question

我制作了一个自定义的 Vue 组件并通过 npm 发布。我的组件在我的主项目中按预期工作，但在当前使用情况下，用户需要发送太多道具才能有效地使用我的组件并且没有重复代码。

我将组件安装为

//index.js in component folder
import MyComponent from "./MyComponent.vue";

export default {
  install(Vue, options) {
    Vue.component("my-component", MyComponent);
  }
};

并在我的项目中注册为

//main.js in project folder
import Vue from 'vue'
import MyComponent from 'my-component'

Vue.use(MyComponent)

在我的.vue 文件中使用我的自定义组件：

<my-component v-model="myData" prop1="prop1" prop2="prop2" prop3="prop3"></my-component>

由于该道具的使用看起来如此不整洁并且导致我自己的代码重复过多，我想在选项中注册该道具并通过我的组件。但无法弄清楚如何做到这一点。

Answer 1

您可以使用安装阶段来覆盖默认值，如下所示：

import MyComponent from './components/MyComponent';

export default {
  install(Vue, options = {}) {
    let props = { ...MyComponent.props };
    Object.keys(options).forEach(k => {
      props[k] = { default: options[k] };
    });

    Vue.component('my-component', { ...MyComponent, props });
  },
};

这个脚本的作用是让你做...

Vue.use(MyComponent, {prop1:"abc", props:"def"});

当您在应用程序的某处使用该组件时，props 仍然是交互式的，并且可以被覆盖，但您可以保留为默认值。它通过将现有的 prop 定义替换为仅将 default 定义为传递值的对象来实现此目的。这有点像 hack，所以我不确定它在某些极端情况下的表现如何。