学习-vue3 非 prop 的 Attribute-禁用Attribute 继承

禁用 Attribute 继承

如果不希望组件的根元素继承 attribute ，可在组件的选项中设置 inheritAttrs: false。

使用场景：

禁用 attribute 继承需要将 attribute 应用于根节点之外的其他元素。

通过将 inheritAttrs 选项设置为 false，可以使用组件的 $attrs property 将 attribute 应用到其它元素上，该 property 包括组件 props 和 emits 中未包含的所有属性（eg: class、style、v-on监听器等）。

如果需要将所有非 prop 的 attribbute 应用于 input 元素而不是 div 元素，可以使用 v-bind 缩写来完成。

    app.components('date-picker', {
        inheritAttrs: false,
        template: `
            <div class="date-picker">
                <input type="datetime-local" v-bind="$attrs">
            </div>
        `
    })

data-status attribute 将应用于 input 元素

    <!-- date-picker 组件使用非 prop 的 attribute -->
    <date-picker data-status="activated"></date-picker>

    <!-- 渲染后的 date-picker 组件 -->
    <div class="date-picker">
      <input type="datetime-local" data-status="activated" />
    </div>