vue3 attrs v-model

深入解析Vue 3中的attrs和v-model：组件属性绑定与双向数据流

Vue 3作为新一代的Vue框架，带来了许多改进和创新。其中，attrs和v-model是两个非常重要的特性，它们分别用于处理组件的属性传递和双向数据绑定。本文将深入探讨Vue 3中的attrs和v-model的使用方法、原理以及在实际开发中的应用。

一、什么是attrs？

在Vue 3中，attrs是一个特殊的prop，用于将父组件传递给子组件的所有非prop属性，自动挂载到子组件的根元素上。这意味着，你可以直接在子组件中访问这些属性，而无需在子组件内部显式定义它们。

使用场景
- 当你需要将自定义属性传递给第三方组件时，可以使用attrs。
- 当父组件中存在一些动态属性，而你希望这些属性在子组件中也能访问时，attrs非常有用。

示例

 <!-- 父组件 --> <template> <ChildComponent :class="dynamicClass" :data-custom="customData" /> </template>

 ```vue <!-- 子组件 --> <template> <div :class="$attrs.class" :data-custom="$attrs['data-custom']">...</div> </template> <script> export default { inheritAttrs: false, mounted() { console.log(this.$attrs); // { class: "custom-class", "data-custom": "some-data" } } }; </script>

注意事项
- 使用attrs时，请注意属性名的大小写。Vue会自动将传递的属性名转换为 kebab-case 格式。
- 默认情况下，子组件会继承根元素的class和style。如果不想继承，可以在子组件中设置inheritAttrs: false。

二、什么是v-model？

v-model是一个用于创建双向数据绑定的一种语法糖，常用于表单元素。在Vue 3中，v-model同样可以用于自定义组件。

使用场景
- 当你需要创建一个具有双向绑定功能的自定义组件时，v-model非常有用。
- 当你想要在一个非表单元素上实现双向数据绑定时，v-model同样适用。

示例

 <!-- 父组件 --> <template> <ChildComponent v-model="value" /> </template>

 ```vue <!-- 子组件 --> <template> <input :value="modelValue" @input="onInput" /> </template> <script> export default { props: { modelValue: String }, emits: ['update:modelValue'], methods: { onInput(event) { this.$emit('update:modelValue', event.target.value); } } }; </script>