vue組件傳值 非 Prop 的 Attribute

vue組件傳值 非 Prop 的 Attribute

一個非 prop 的 attribute 是指傳向一個組件，但是該組件並沒有相應 prop 定義的 attribute。

因為顯式定義的 prop 適用於向一個子組件傳入信息，然而組件庫的作者並不總能預見組件會被用於怎樣的場景。這也是為什么組件可以接受任意的 attribute，而這些 attribute 會被添加到這個組件的根元素上。

例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的 bootstrap-date-input 組件，這個插件需要在其 input 上用到一個 data-date-picker attribute。我們可以將這個 attribute 添加到你的組件實例上：

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后這個 data-date-picker="activated" attribute 就會自動添加到 的根元素上。

禁用 Attribute 繼承

如果你不希望組件的根元素繼承 attribute，你可以在組件的選項中設置 inheritAttrs: false。例如：

Vue.component('my-component', {
  inheritAttrs: false,
  props: ["label", "value"],
})

在my-component組件上，除了label和value外，其他父組件的屬性不會傳遞到子組件上。