在 vuejs 中传递多个属性

Question

我对 VueJS 很陌生。我正在使用 VueCLI3 和 VuetifyJS 开发一个新项目。

我正在尝试创建一个基于 VuetifyJS 组件的可重用组件，并希望通过在单独的文件中传递多个道具以在我的新组件文件中一次呈现它们来使事情变得更容易。 我发现这篇文章解释了实现此类目标的技术。

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

每次我需要渲染它们时，我都必须导入我的单独文件。

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>

有没有办法在全局范围内注册文件，这样我就可以像这样在应用程序的任何地方使用它？

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>

Answer 1

您可以使用 mixin 并在全局范围内注册该 mixin。

buttonPropsMixin

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

ma​​in.js

import buttonPropsMixin from '...';

Vue.mixin(buttonPropsMixin)

注意每个 vue 组件都有自己的buttonProps，因此如果您在一个组件中更改color，它不会影响其他组件！
如果您希望 buttonProps 在您的所有组件中具有相同的状态，您可以采用 Igor 提到的 vuex 方式并将其与您在该 mixin 中定义 mapGetters 的 mixin 一起使用。

Answer 2

如果props.js 中的数据不需要是响应式的，并且所有组件都是某个根组件的子组件，您可以这样做：

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>

否则我建议您使用Vuex 或使用here 描述的全局总线方法。