如何在 vue 3 中使用 v-bind=$attrs ？

Question

我正在将 vue 2 应用程序迁移到 vue 3。在官方文档中，提到 $listeners 对象已在 Vue 3 中删除。事件监听器现在是 $attrs 的一部分。它也采用非 prop 属性（类、样式）。在我的 vue 2 应用程序中，有一个图标按钮自定义组件，如下所示。

图标组件：

<template>
    <vu-button v-bind="buttonProps"
               :class="buttonClass"
                v-on="$listeners"         
               @click="buttonToggle">
        <vu-icon v-bind="iconProps"><slot/></vu-icon>
    </vu-button>
</template>

它用于各种其他组件。

父组件 1：

<vu-icon-button id="sw1" medium style="left:200px;">home</vu-icon-button>

父组件2：

<vu-icon-button class="menu-detail-btn" icon="collapse_menu" icon-type="su" @click="openModal()" size="small"></vu-icon-button>

至于迁移策略，我删除了 $listeners 但不确定那些非 prop 属性和 v-bind 标记。如何修改它们以便可以在具有属性的父组件中使用？

Answer 1

访问 Vue 3 中的 Fallthrough 属性

<script setup>您可以使用API访问组件的 Fallthrough 属性useAttrs()：

<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>

如果不使用<script setup>， attrs 将作为上下文的属性公开setup()：

export default {
  setup(props, ctx) {
    // fallthrough attributes are exposed as ctx.attrs
    console.log(ctx.attrs)
  }
}

禁用属性继承

如果不希望组件自动继承属性，可以inheritAttrs: false在组件的选项中进行设置。

如果使用<script setup>，您将需要使用单独的普通<script>块来声明此选项：

<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup>
// ...setup logic
</script>

您现在可以$attrs直接在模板中使用该对象。当您想要将属性绑定到您选择的非根元素（而不是由根元素继承属性的自动行为）时，这非常有用。

例子：

<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>