Vue3 属性绑定

Vue3中，在父组件中使用子组件时，传入的属性会默认绑定到子组件的根元素上，如：

<Button 
  size="small"
  @click="onClick" 
  @focus="onFocus" 
  @mouseover="onMouseover"> Test </Button>

子组件如下

<template>
  <div>
    <button>Click me</button>
  </div>
</template>

则Button 组件上的三个事件都会默认绑定到 div 上而不是 button 上。

Q：如果子组件较为简单，则可直接享受 Vue 带来的便利。如果子组件较为复杂，如何手动阻止默认绑定？

A：在子组件中的 script 标签中需要禁用inheritAttrs:继承属性 ，用$attrs 获取所有属性，并且在希望绑定属性的元素上使用 v-bind=”$attrs”：

<template>
  <div>
    <button v-bind="$attrs">
    Click me
    </button>
  </div>
</template>

<script>
export default {
	inheritAttrs: false,
};
</script>
// ...

Q：如果属性很多，你想分散绑定到更多元素上，如何实现？

A：通过 setup 中的 context 析构赋值后再分别绑定到对应元素上。

<template>
  <div :size="size">
    <button @Click="onClick">
    Click me
    </button>
  </div>
</template>

<script>
export default {
	inheritAttrs: false,
	setup(props, context) {
		const {onCLick, onMouseover, onFocus} = context.attrs
		return {size, onCLick, onMouseover, onFocus}
	}
};
</script>
// ...

太麻烦了？

还可以使用 ES6 剩余操作符进行批量绑定。

<template>
  <div :size="size">
    <button v-bind="actions">
    Click me
    </button>
  </div>
</template>

<script>
export default {
	inheritAttrs: false,
	setup(props, context) {
		const {size, ...actions} = context.attrs
		return {size, actions}
	}
};
</script>
// ...