[Vuejs]-How to pass an option into custom vue component?

by

3👍

✅

You can use the install phase to override the defaults like this:

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 });
  },
};

What this script does is allow you to do…

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

When you use the component somewhere in the app, the props are still interactive, and can be overriden, but you can leave as default. It does this by replacing the existing prop definitions with an object that only has default defined as the passed value. It’s a bit of a hack, so I’m not sure how well it will hold up in some edge cases.

👤Daniel

Leave a comment