Vue3属性绑定

103 阅读1分钟

vue3在父组件引用的子组件名上加上事件,会自动传进子组件的最外层的元素。

Vue3属性绑定

  • 默认所有属性都绑定到根元素。
  • 使用inheritAttrs:false可以取消默认绑定。
  • 使用$attrs或者context.attrs获取所有属性。
  • 使用v-band = "$attrs"批量绑定属性。
  • 使用const {size,level,...xxx}=context.attrs可以将属性分开。

Vue 3会默认将传给自定义组件的事件传给其模板,事件会作用在包括模板的第一个标签(下例中的div)上。

消除attrs继承

在模板中

export default {
  inheritAttrs : false
}

实现点击模板的一部分为事件

如点击button而不是div触发事件。

<template>
  <div>
    <button v-bind='$attrs'>  //也可以使用setup中的context.attrs来获取属性
  </div>
</template>