vue3 属性绑定

225 阅读1分钟

vue3属性绑定

默认所有属性全部绑定给根元素

如何取消默认绑定

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

//`inheritAttrs` 或通过插件启用的自定义的选项 无法在 `<script setup>` 声明

可以`<script setup>` 可以和普通的 `<script>` 一起使用

获取所有属性

<script setup>
import { useAttrs } from 'vue'
const {size,...rest} = useAttrs() //size单个属性 rest剩余属性
</script>

//或者

<script>
setup(props,context){
   const {size,...rest} = context.attrs
}
</script>

注释: ...rest是ES6语法(剩余操作符)

绑定属性

v-bind="$attrs"  //绑定所有属性

v-bind="rest" //绑定部分属性

:size="size" //单个属性