将特定的 $attrs 参数传递给 Vue 组件

Posted 2023-02-23

【中文标题】将特定的 $attrs 参数传递给 Vue 组件

【英文标题】：Pass specific $attrs parameter to Vue component

【发布时间】：2021-01-28 14:42:36

【问题描述】：

我的父组件中有以下代码：

<TestVIsComponent :post="somepost" :somevalue="17" data-status="activated" data-feature="new" @change="submitChange"></TestVIsComponent>

还有以下子组件：

  <div>
     <h1 v-bind="$attrs">post.id</h1>
  </div>

此代码和 $attrs 会将 data-status="activated" data-feature="new" 属性传递给 H1 标签，而不是所需结果的 div。结果如下：

<h1 data-status="activated" data-feature="new">1</h1>

但是，有没有办法只将一个属性传递给 H1 标签？有没有办法以某种方式迭代孩子的 $attrs ？类似 attrs[0] 或 attrs['attribute_name'] 的东西？我需要达到以下或类似的目标：

  <div>
     <h1 v-bind="$attrs[0]">post.id</h1>
     <h3 v-bind="$attrs[1]">post.something</h3>
  </div>

【参考方案1】：

如果您知道div 元素的属性，那么您应该将它们用作props 而不是$attrs。

或者你可以拆分$attrs

<template>
<div v-bind="divAttrs">
   <h1 v-bind="h1Attrs">post.id</h1>
</div>
</template>
<script>
export default 
   computed: 
     divAttrs () 
       const allowed = ['data-status', 'data-feature']
       return Object.keys(this.$attrs)
         .filter(key => allowed.includes(key))
         .reduce((obj, key) => 
           obj[key] = this.$attrs[key]
           return obj
         , )
     ,
     h1Attrs () 
       const notAllowed = ['data-status', 'data-feature']
       return Object.keys(this.$attrs)
         .filter(key => !notAllowed.includes(key))
         .reduce((obj, key) => 
           obj[key] = this.$attrs[key]
           return obj
         , )
     
   

</script>

【讨论】：

谢谢你，它正在工作。但是，是否有更简单的迭代解决方案或其他选项？另外，我发现我可以将属性传递给数据参数：data() return myAttr: this.$attrs 然后我可以将其用作 myAttr["data-status"]。这是推荐的还是我应该避免分配它？

这是一个通用的解决方案，您可以轻松更改allowed 变量来控制这些getter。如果您不想使用反应性，则无需将 $attrs 分配给 data 参数。只需将其用作 $attrs['data-status']