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

Question

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

<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>

Answer 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>