如何将选项传递到自定义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"});

当你在应用程序中的某个地方使用组件时，道具仍然是交互式的，并且可以被覆盖，但你可以保留为默认设置。它通过将现有的属性定义替换为仅将default定义为传递的值的对象来实现这一点。它有点像黑客，所以我不确定它在一些边缘情况下会有多好。