将特定的 $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>

Answer 2

这就是我有条件地传递 $attrs 的方式。我有一个动态组件，它可以接受不同的 props，具体取决于它渲染的实际组件。

componentToRender

是一个计算值，它可能是'a'（标签）或'RouterLink'（vue路由器RouterLink组件）。

当它渲染标签时，我想传递道具

href

。 当它渲染 RouterLink 时，我不想传递 props

href

。

<component
  :is="componentToRender"
  v-bind="{ ...$attrs, ...(componentToRender === 'a' ? { href: newLink } : {}) }">
  Go to the link
</component>