Vue属性作为无值的道具名称

时间:2019-07-10 10:09:40

标签: vue.js vuetify.js v-tooltip

我想传递一个没有任何值的属性-仅名称。我希望这个名字根据道具是动态的。

我想创建一个工具提示组件,使工具提示侧->左上右或下。在v-tooltip中,没有属性 side ,所有方面都是没有值的另一个属性。我希望它根据prop进行更改(side是一个变量-我组件的prop)。

<template>
  <v-tooltip side>            
    <template slot="activator">
      <slot slot="activator"></slot>
    </template>   
    <span>{{text}}</span>      
  </v-tooltip>
</template>
<script>
  export default {
    props: {
      text: {
        type: String,
        required: true,
      },
      side: {
        default: 'top',
      },
    },
  }
</script>

我找不到使用prop作为属性名称的方法

1 个答案:

答案 0 :(得分:1)

您需要实现两件事。在Vue中,使用<my-component has-this-prop />调用组件与使用<my-component :has-this-prop="true" />调用组件相同。布尔值基本上可以切换道具。

您还可以通过使用v-bind语法(不带in the documentation概述)使用side语法动态更改绑定到组件的道具。

这意味着,如果您的父组件中有一个名为v-bind的道具,且该道具始终包含正确的一面,则可以创建一个包含所有要传递的道具的计算属性,然后使用{{1} }在您的v-tooltip上传递道具:

<template>
  <v-tooltip v-bind="tooltipProps">
    <!-- Something -->
  </v-tooltip>
</template>

<script>
const validSides = [
  'top',
  'top left',
  'top center',
  'top right',
  // you get the idea
];

export default {
  props: {
    side: {
      type: String,
      default: 'top',
      validator(prop) {
        return validSides.contains(prop);
      }
    }
  },

  computed: {
    tooltipProps() {
      if (!validSides.contains(this.side)) {
        return {};
      }

      const propsNames = this.side.split(' ');
      const props = {};
      for (const propName of propsNames) {
        props[propName] = true;
      }

      return props;
    }
  }
}
</script>