Vue 处理组件多余的属性

说明:

注意卡多余属性指的是:<div fuck="lala"></div> 而不是: <div :fuck="lala"></div>

实例:

1. 关闭自动继承属性

createApp({
    components: {
        test: {
            inheritAttrs: false,//关闭自动继承
            template: `
                <div>
                    <h1 v-bind="$attrs">hhhh</h1>
                </div>
            `,//所有传入的多余属性都会以键值对的形式保存在$attrs对象中
        }
    }
}).mount('#app');

<div id="app">
	<test fuck="Lala" shit="haha"></test>
</div>

最终渲染成

<div id="app">
	<div>
		<h1 fuck="Lala" shit="haha">hhhh</h1>
	</div>
</div>

2. 开启自动继承属性:

createApp({
    components: {
        test: {
            template: `
                <div>
                    <h1 v-bind="$attrs">hhhh</h1>
                </div>
            `,
        }
    }
}).mount('#app');

<div id="app">
	<test fuck="Lala" shit="haha"></test>
</div>

最终渲染成:

<div id="app">
	<div fuck="Lala" shit="haha">
		<h1 fuck="Lala" shit="haha">hhhh</h1>
	</div>
</div>

2.1. 说明:

1. 自动继承会自动把这些多余属性都添加到组件模板中的最顶级标签
   1. 如果有多个最顶级标签, 且没有手动指定多余属性的去处, 则会弹出警告, 但不报错