浅析Vue3属性绑定：v-bind和属性继承场景

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

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

例如，在 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类型

• « 上一篇：MATLAB+C+Openmp混合编程（3）-mex.h基础
• » 下一篇：QT制作TCP客户端