Как передать опцию в пользовательский компонент 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 определено как переданное значение. Это что-то вроде хака, поэтому я не уверен, насколько хорошо он выдержит некоторые крайние случаи.