# [Vue] Fallthrough Attributes（不透過 `props` 對 child component 傳入 attributes）

###### tags: `Vue` `前端筆記`

用 fallthrough attributes 是讓 child component 在引用的 component 中被編譯後成為 HTML elements「暫時」擁有「額外的」attributes（不管是 `event`, `class`, `id` 等等）。

## 傳遞

// MyButton.vue

<template>
  <button>Hello</button>
</template>

// App.vue

<template>
  // 直接加入 class
  <my-button class="my-button"></my-button>
</template>

這時打開 Dev tool 可以看到被加上去的 class：

### 事件（event）也可以

// MyButton.vue

<template>
  <button>Hello</button>
</template>

// App.vue

<template>
  // 直接加入 event
  <my-button @click="playFallthrough"></my-button>
</template>

<script>
export default {
  methods: {
      playFallthrough () {
          console.log('hit from parent');
      }
  }
}
</script>

點擊按鈕會觸發 parent 新增的 event：

## 結合

傳入的 attributes 和原本 component 有的 attritubes 會結合，所以編譯後打開 Dev tool 會看到兩個 classNames。

// Mybutton.vue

<template>
  <button class="btn">Hello</button>
</template>

// App.vue

<template>
  // 直接加入 class
  <my-button class="my-button"></my-button>
</template>


### 如 stlye 同等級的話還是會依 child component 的為主

// Mybutton.vue

<template>
  <button class="btn">Hello</button>
</template>

<style scoped>
.btn {
    color: Green;
}
</style>

// App.vue

<template>
  // 直接加入 class
  <my-button class="my-button"></my-button>
</template>

<style scoped>
.my-button {
    color: Yellow;
}
</style>



### 事件（event）也可以，child 會先執行

// MyButton.vue

<template>
  <button @click="play">Hello</button>
</template>

<script>
export default {
  methods: {
      play () {
          console.log('child');
      }
  }
}
</script>

// App.vue

<template>
  // 直接加入 event
  <my-button @click="playFallthrough"></my-button>
</template>

<script>
export default {
  methods: {
      playFallthrough () {
          console.log('hit from parent');
      }
  }
}
</script>

parent 跟 child 的事件都會觸發，但是 child 會先被執行：

## 取得 Fallthrough Attributes

在 child component 使用 `$attrs` 可以取得 fallthrough 得到的 attributes（會以物件的形式）：

// MyButton.vue

<template>
  <button @click="play">{{ $attrs }}</button>
</template>

<script>
export default {
  methods: {
      play () {
          console.log('child');
          console.log(this.$attrs);
      }
  }
}
</script>

// App.vue

<template>
  // 直接加入 event
  <my-button class="my-button" @click="playFallthrough" id="hello"></my-button>
</template>


事件會被當作物件內的方法，取得的方式為 `$attrs.onEventType` -> `$attrs.onClick`:

// MyButton.vue

<template>
  <button @click="play">{{ $attrs }}</button>
</template>

<script>
export default {
  methods: {
      play () {
          console.log('child');
          console.log(this.$attrs);
          console.log(this.$attrs.onClick);
      }
  }
}
</script>


## 總結

`props` 傳遞的資料並不會再編譯後出現在 child 的 HTML 元素上，但是 fallthrough 會新增屬性在 HTML 元素上。

## 參考資料

1. [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
2. [Vue: Fallthrough Attributes](https://lunawen.com/vue/20220328-luna-tech-vue-fallthrough-attributes/)
3. [對 Vue component 傳入非 Prop 的 attribute](https://ithelp.ithome.com.tw/articles/10251062)