vue.js - vue3关闭透传Attributes后怎么把属性传到子元素上？

Question

<script setup lang="ts">import { useAttrs } from 'vue'defineOptions({  inheritAttrs: false})const attrs = useAttrs()</script><template>  <div>    <input type="text" class="form-control">  </div></template>

Answer 1

v-bind="attrs"

<div>    <input type="text" class="form-control" v-bind="attrs" />  </div>

Answer 2

这个问题涉及到 Vue 3 的 inheritAttrs: false 选项和 useAttrs 钩子。当你设置 inheritAttrs: false，Vue 将不再自动将父级组件的属性传递给子组件。在这种情况下，你需要使用 useAttrs 钩子来手动获取属性并将它们传递给子组件。

首先，你需要将 useAttrs 钩子的返回值作为一个对象来使用，这个对象中的属性可以直接在模板中使用。然后你可以通过这些属性向子元素传递属性。

下面是如何修改你的代码以实现这一点的示例：

<script setup lang="ts">import { useAttrs } from 'vue'defineOptions({  inheritAttrs: false})const attrs = useAttrs()</script><template>  <div>    <input :type="attrs.type" :class="attrs.class" />  </div></template>

在这个例子中，我使用了 :type="attrs.type" 和 :class="attrs.class" 来将 type 和 class 属性传递给 <input> 元素。这是因为 useAttrs 钩子的返回值是一个对象，其中包含所有从父组件接收的属性。这样，你就可以直接在子组件中访问这些属性了。