使用父组件类设置Vue中的不同元素

Question

使用父组件类设置Vue中的不同元素。如何将这个类道具移动到组件中的任何其他元素？我正在使用vue 3

//组件父

<ParentCompy title="hello" class="someClassName">

//parentCompy组件

<template>
<nav>// not here
<ul class="nav nav--tabs someClassName">// but here
<li>some list</li>
...
</ul>
</nav>  
</template>

Answer 1

一种选择是制作道具，然后将其放置在所需的位置

<template>
<nav>
<ul :class="class">
<li>some list</li>
...
</ul>
</nav>  
</template>
<script>
export default {
props: {
class: String
}
}
</script>

如果您想将所有道具自动移动到此元素，您可以禁用属性继承：

<template>
<nav>
<ul v-bind="$attrs">
<li>some list</li>
...
</ul>
</nav>  
</template>
<script>
export default {
inheritAttrs: false,
}
</script>

编辑

你可以这样使用它：

<template>
<nav>
<ul class="nav nav--tabs" :class="class">
<li>some list</li>
...
</ul>
</nav>  
</template>
<script>
export default {
props: {
class: String
}
}
</script>