vue3绑定属性新特性
默认所有属性都绑定到组件的根元素
//父组件
<template>
<component size="mini" @click="onClick" @focus="onFocus"></component>
</template>
//子组件
<template>
<button></button >
<template>
//相当于
<template>
<button size="mini" @click="onClick" @focus="onFocus"></button >
<template>
如果不想绑定属性到根元素，可以配置inheritAttrs:false
//子组件
<template>
<button></button>
</template>
<script lang="ts">
export default {
inheritAttrs:false，// 默认绑定到根元素配置项
}
</script>
vue3新特性 ：$attrs是一个对象，包含了该元素的所有绑定事件
//子组件
<template>
<div>
<button v-bind="$attrs"></button >
</div>
<template>
// 相当于
<template>
<div>
<button size="mini" @click="onClick" @focus="onFocus"></button >
</div>
<template>
另一种批量绑定属性的方法是用setup的context.attrs
//子组件
<template>
<div size="mini">
<button @click="onClick" @focus="onFocus"></button>
</div>
</template>
<script lang="ts">
export default {
setup(props,context) {
const { onClick, size,onFocus } = context.attrs;
return { size , onClick, onFocus };
},
};
批量绑定属性可使用...剩余操作符
//子组件
<template>
<div size="mini">
<button v-bind="rest"></button>
</div>
</template>
<script lang="ts">
export default {
setup(props,context) {
const { size , ...rest } = context.attrs;
return { size, rest };
},
};
