vue.js - vue 属性作为没有值的道具名称

Question

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

我想创建一个工具提示组件，以获取工具提示侧 -> 左上角或右下角。在 v-tooltip 中没有属性side，所有 side 都是另一个没有价值的属性。我希望它根据道具进行更改（侧是一个变量 - 我的组件的道具）。

<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 作为属性名称的方法

标签： vue.jsvuetify.jsv-tooltip

Answer 1

您需要意识到两件事。在 Vue 中，使用<my-component has-this-prop />它调用组件与使用<my-component :has-this-prop="true" />. 布尔值基本上切换道具。

您还可以使用v-bind不带道具名称的语法动态更改绑定到组件的道具，如文档中所述。

这意味着，如果您side在父组件中调用了一个始终包含正确边的 prop，您可以创建一个包含您要传递的所有 props 的计算属性，然后v-bind在您上使用v-tooltip来传递 props：

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