Передать параметры для компонентов vuejs, зарегистрированных по всему миру

Question

Я регистрирую свои компоненты vuejs следующим образом:

index.js (отдельный многократно используемый проект npm + webpack: myComponents)

import MyButtons from './src/components/my-buttons.vue'
import MyInput from './src/components/my-inputs.vue'
export default {
    install(Vue, options) {
        Vue.component("my-button", MyButtons);
        Vue.component("my-input", MyInput);
    }
};

Еще один проект, в котором я использую вышеуказанныйкомпоненты с npm link

import Vue from 'vue'
import App from './vue/App.vue' 
import MyComponents from 'myComponents'

Vue.use(MyComponents, {
    theme: 'SomeTheme',
    color: 'SomeColor'
});

new Vue({el: '#app',   render: h => h(App)});

Теперь я хочу, чтобы функция install() как-то передавала параметры зарегистрированным компонентам и сохраняла их. Чтобы я мог управлять цветом и темой таким образом, чтобы каждый экземпляр этих компонентов отображался в соответствии с темой и цветом, где эти компоненты будут иметь более одной темы / стиля и цвета.

Answer 1

Распространенным способом решения этой проблемы является установка параметров в прототипе Vue.

Например:

install(Vue, options) {
  Vue.prototype.$myLibraryOrPluginName = { options }
  Vue.component("my-button", MyButtons);
  Vue.component("my-input", MyInput);
}

Затем внутри компонентов вы можете получить доступ к параметрам, используя:

this.$myLibraryOrPluginName.options.theme

Как я определил здесь, options не будет реактивным. Вам нужно будет привлечь Vue.observable, чтобы добавить реактивность:

Vue.prototype.$myLibraryOrPluginName = Vue.observable({ options })