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定义为传递值的对象替换现有的prop定义来实现。这有点骇人听闻，所以我不确定它在某些极端情况下的承受能力如何。

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

1 个答案: