我想传递一个没有任何值的属性-仅名称。我希望这个名字根据道具是动态的。
我想创建一个工具提示组件,使工具提示侧->左上右或下。在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作为属性名称的方法
答案 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>