Question

我对VueJS很陌生。我正在使用VueCLI3和VuetifyJS进行新项目。

我正在尝试基于VuetifyJS组件创建可重用的组件，并希望通过在一个单独的文件中传递多个props以便一次在我的新组件文件中呈现它们来简化事情。我发现这篇文章解释了实现这种目标的技术。

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'
      }
    }
  }
}

main.js

import buttonPropsMixin from '...';

Vue.mixin(buttonPropsMixin)

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

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描述的全局总线方法。

在vue.js中传递多个属性

2 个答案: