Passing multiple properties in vuejs

Question

I'm quite new with VueJS. I'm working on a new project with VueCLI3 & VuetifyJS.

I'm trying to create a reusable components based on VuetifyJS components and would like to make things easier by passing multiple props in a separate file to render them at once in my new component files. I found this article that explains a technique to achieve such thing.

https://alligator.io/vuejs/passing-multiple-properties/

Every time I need to render them I must import my seperate file.

component1.vue

<template>
  <v-btn v-bind='buttonProps'>
    Button 1
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>

component2.vue

<template>
  <v-btn v-bind='buttonProps'>
    Button 2
  </v-btn>
</template>

<script>
  import { buttonProps } from './props.js';

  export default {
    data: () => ({ buttonProps })
  }
</script>

Is there any way to register the file globally so it allows me to use it anywhere in the app like this?

props.js

export const buttonProps = {
  color: 'primary',
  small: true,
  outline: true,
  block: true,
  ripple: true,
  href: 'https://alligator.io'
}

main.js

import Props from 'props.js';

component3.vue

<template>
  <v-btn v-bind='buttonProps'>
    Button 3
  </v-btn>
</template>

<script>
  ... // no import needed
</script>

Crackers · Accepted Answer · 2018-08-24 09:17:07Z

2

You can use a mixin and register that mixin globally.

buttonPropsMixin

export default {
  data() {
    return {
      buttonProps: {
        color: 'primary',
        small: true,
        outline: true,
        block: true,
        ripple: true,
        href: 'https://alligator.io'
      }
    }
  }
}

main.js

import buttonPropsMixin from '...';

Vue.mixin(buttonPropsMixin)

Note That each vue component has its own buttonProps, so if you change in one component the color it will not affect the other components!
If you want buttonProps to have the same state across all your components you can go the vuex way as Igor mentioned and use it with an mixin where you define the mapGetters in that mixin.

edited Aug 24, 2018 at 9:17

answered Aug 24, 2018 at 8:59

Crackers

1,1257 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alec Hance Over a year ago

Thank you this works great for me, you just saved me ton of times!

Alec Hance Over a year ago

Another question, I would like to register all mixins globally in a separate file like this: prop.js import Vue from 'vue' import buttonPropsMixin1 from '...'; Vue.mixin(buttonPropsMixin1) import buttonPropsMixin2 from '...'; Vue.mixin(buttonPropsMixin2) and then import this file to my main.js file main.js import prop from './prop.js'; But i got this error error: 'prop' is defined but never used (no-unused-vars) at src/main.js Do I have to do this? new Vue({ prop, render: h => h(App) }).$mount('#app')

Crackers Over a year ago

Check out this sandbox: codesandbox.io/s/n5vqlxl2ll Is this what you wanted?

Alec Hance Over a year ago

Hi, I was wondering if it is possible to have hyphens in my v-bind? Instead of writing this v-bind="ed_checkbox" I would like to write v-bind="ed-checkbox"

Igor · Accepted Answer · 2018-08-24 09:02:38Z

0

If data in props.js doesn't need to be reactive and all the components are children of some root component you could do this:

main.js:

import buttonProps from 'props.js';

new Vue({
  el: rootComponentElement,
  buttonProps: buttonProps,
  render: h => h(rootComponent)
})

component.vue:

<template>
  <v-btn v-bind='$root.$options.buttonProps'>
    Button 3
  </v-btn>
</template>

<script>
  ... // no import needed
</script>

Otherwise I would advice you to use Vuex or use the global bus method described here.

edited Aug 24, 2018 at 9:02

answered Aug 24, 2018 at 8:57

Igor

8095 silver badges16 bronze badges

1 Comment

Alec Hance Over a year ago

thank you for your answer but @D-F found the exact solution I needed for my project.

Collectives™ on Stack Overflow

Passing multiple properties in vuejs

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related