vue3造轮子-button组件2020-10-17

image.png

vue默认你传给组件上的所有事件默认传给最外层的元素。但是假如说div包裹住button，onclick事件目标div，想让目标是button

让div不继承属性

<script lang="ts">
export default {
    inheritAttrs:false
}
</script>

继承属性改为false，div不会再默认拥有绑定的事件

让div里的button绑定$attrs

让组件中特定的元素继承事件。$attrs 代表所传递的事件，把这个事件绑定在目标元素 v-bind="$attrs"

首先获取到事件<button v-bind="$attrs">默认包含所有人属性

image.png

属性分成两部分

setup(props,context){
  const {size,...rest} = context.attrs
  return {size,rest}
}
在目标元素上 v-bind="rest",rest就是除了size其他属性

image.png

props和attrs区别

1.props要先声明才能取值，attrs不用声明就可以取值。
2.props不包含事件，attrs包含事件。
3.props支持string以外的类型，attrs只有string类型。
4.如果props里声明了一个变量，那其他没有声明的变量就会到attrs里面。