Блог

У меня есть следующий код в моем родительском компоненте:

 <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=»активированный» data-feature=»новый» в тег 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>
  

Если вы знаете, какие атрибуты для 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>