<>属性默认传递给根元素

在组件间传递时,父组件传入给子组件的属性,会默认传递给子组件的最外层标签上。

例如,在 ButtonDemo组件中导入了 Button组件,并将onClick属性传递给子组件
// ButtonDemo.vue <template> <div> <Button @click="onClick" @focus="onFoces"
size="normal">按钮</Button> </div> </template> <script lang="ts"> import Button
from '../lib/Button.vue' export default { components: {Button}, setup() { const
onClick = () => { console.log('hi') } return {onClick} } } </script> //
Button.vue<template> <button> <slot/> </button> </template>
在Button组件中未定义任何事件,但是在使用这个组件的时候传入的事件却可以使用,就是因为vue会把你传给这个组件上的所有事件,默认传给最外层的元素。

<>内层元素继承属性

如果不想让子组件最外层的元素绑定属性,则需要使用inheritAttrs:false,这样就可以让内层的元素继承属性。
// Button.vue <template> <div> <button> <slot></slot> </button> </div> </
template> <script lang="ts"> export default { inheritAttrs: false, }; </script>
<>指定元素继承属性

如果想要让div里面的button标签绑定上这些属性,可以用v-bind="$attrs"
<template> <div> <button v-bind="$attrs"> <slot/> </button> </div> </template>
<>分开继承属性

如果想要一部分绑定给button标签,一部分绑定给div标签,我们可以借助context.attrs
<template> <div :size="size"> <button v-bind="rest"> <slot></slot> </button> </
div> </template> <script lang="ts"> export default { inheritAttrs: false, setup(
props, context) { const { size, ...rest } = context.attrs; return { size, rest }
; }, }; </script>
此处,将size属性给div标签继承,剩余的属性给button标签继承。

<>总结

* 默认所有属性都绑定到根元素
* 使用 inheritAttrs:false可以取消默认绑定
* 使用$attrs或者context.attrs获取所有属性
* 使用v-bind="$attrs"批量绑定属性
* 使用 const {size, ...rest} = context.attrs将属性分开继承
<>v-bind和v-model的区别

* v-bind 是标签内属性的单向绑定
* v-model 是标签外值的双向绑定
<>props和attrs的区别

* props需要先声明才能获取值,而attrs则不用
* props声明过的属性,attrs里面不会在出现
* props不包含事件,attrs包含
* props支持string以外的类型,而attrs只有string类型

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信