Vue 透传 Attribute

单个元素

自定义MyButton组件。

<template>
  <button class="btn">Click me</button>
</template>

<script>
export default {
  name: "MyButton"
}
</script>

<style scoped>
.btn {
  height: 10px;
  color: blue;
}
</style>

引用MyButton组件。

添加了class=large属性，该属性直接透传到MyButton的根元素button上（template是占位符不是根元素）。

large会和button上的btn合并，最终class为class="btn large"。

<template>
  <MyButton class="large"></MyButton>
</template>

<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";

export default {
  name: "ParentComponent",
  components: {MyButton}
}
</script>

<style scoped>
.large {
  height: 100px;
}
</style>

实际渲染的HTML：

<button class="btn large">Click me</button>

组件中套组件

最外层传入的属性将透传到最底下组件。

MyButton

<template>
  <BaseButton v-bind="$attrs" v-on="$listeners"></BaseButton>
</template>

<script>
import BaseButton from "@/components/fallthrough-attributes/BaseButton";
export default {
  name: "MyButton",
  components: {BaseButton},
  inheritAttrs: false,
  methods: {
    onMyButtonClick() {
      console.log("onMyButtonClick")
    }
  }
}
</script>

BaseButton

<template>
  <button v-on="$listeners">Base button</button>
</template>

<script>
export default {
  name: "BaseButton"
}
</script>

ParentComponet

<template>
  <MyButton id="xxx" class="large" @click="onParentClick" test-attr="test-attr"></MyButton>
</template>

<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";

export default {
  name: "ParentComponent",
  components: {MyButton},
  methods: {
    onParentClick() {
      console.log("onParentClick");
    },

  }
}
</script>

多个元素

多个元素需要使用div包裹一层，并且指定attr和listeners传入到指定的元素。

inheritAttrs: false：表示不自动地继承attribute（否则直接赋值在最外层div）。

MyButton

<template>
  <div class="btn-wrapper">
    <button v-bind="$attrs" v-on="$listeners"  id="yyy" class="btn" @click="onMyButtonClick">Click me</button>
    <p>Fallthrough attribute: {{ $attrs }}</p>
    <p>Fallthrough listeners: {{ $listeners }}</p>
  </div>

</template>

<script>
export default {
  name: "MyButton",
  inheritAttrs: false,
  methods: {
    onMyButtonClick() {
      console.log("onMyButtonClick")
    }
  }
}
</script>

<style scoped>
.btn {
  height: 10px;
  color: blue;
}
</style>

ParentComponent

<template>
  <MyButton id="xxx" class="large" @click="onParentClick" test-attr="test-attr"></MyButton>
</template>

<script>
import MyButton from "@/components/fallthrough-attributes/MyButton";

export default {
  name: "ParentComponent",
  components: {MyButton},
  methods: {
    onParentClick() {
      console.log("onParentClick");
    },

  }
}
</script>

<style scoped>
.large {
  height: 100px;
}
</style>

最终 HTML

class=large合并在最外层div上，其余合并属性在button上

<div class="btn-wrapper large">
  <button id="yyy" test-attr="test-attr" class="btn">Click me</button>
  <p data-v-6bf75713="">Fallthrough attribute: { "id": "xxx", "test-attr": "test-attr" }</p>
  <p>Fallthrough listeners: {}</p>
</div>

参考

https://staging-cn.vuejs.org/guide/components/attrs.html