vue2升级Vue3--native、对inheritAttrs作用做以解释、声明的prop属性和未声明prop的属性

native取消

Vue 3 中,v-on 的 .native 修饰符已经被移除。在 Vue 2 中,.native 修饰符用于在组件的根元素上监听原生 DOM 事件,但在 Vue 3 中,这一行为发生了变化。

在 Vue 3 中,所有未在子组件的 emits 选项中定义的事件监听器,都会自动作为原生事件绑定到子组件的根元素上。因此,你不再需要使用 .native 修饰符来监听原生事件。

javascript 复制代码
//vue2代码:
<my-component @click.native="handleClick" />
//vue3代码
<my-component @click="handleClick" />

注意:
子组件的 emits 选项:如果子组件中定义了 emits,并且事件名与原生事件冲突,Vue 会优先将事件视为自定义事件

例如:

javascript 复制代码
export default {
  emits: ['click']
}

在这种情况下,@click 会被视为自定义事件,而不是原生事件。

inheritAttrs: false 的影响:如果子组件中设置了 inheritAttrs: false,则父组件传递的事件监听器不会自动绑定到子组件的根元素上。

inheritAttrs

在 Vue 3 中,inheritAttrs 是一个组件选项,用于控制是否将父组件传递的未声明为 props 的属性(attributes)自动继承到子组件的根元素上。它的默认值是 true
inheritAttrs: true 的行为

当 inheritAttrs 设置为 true 时:

父组件传递给子组件的未声明为 props 的属性(包括 class、style、事件监听器等)会自动绑定到子组件的根元素上。

如果子组件是单根节点组件,这些属性会被正确绑定到根元素上。

如果子组件是多根节点组件(片段组件),则会抛出警告。
inheritAttrs: false 的行为

当 inheritAttrs 设置为 false 时:

子组件的根元素不会自动继承父组件传递的未声明为 props 的属性。

这些未声明的属性可以通过 $attrs 访问,并可以手动绑定到子组件内部的其他元素上

在多根节点组件中,不会抛出警告。

使用场景

  • 默认行为(inheritAttrs: true):
    适用于大多数场景,尤其是子组件的根元素需要直接继承父组件传递的属性时。
    例如,子组件是一个简单的包装器,直接将属性透传到内部元素上。
  • 禁用继承(inheritAttrs: false):
    当子组件的根元素不是目标元素,或者需要将属性绑定到内部的其他元素时,应设置为 false。
    例如,子组件内部有多个元素,需要将属性绑定到特定的内部元素上

demo子组件:

javascript 复制代码
<template>
  <div class="input-wrapper">
    <input v-bind="$attrs" />
  </div>
</template>

如果 inheritAttrs: true,父组件传递的 class、style 等属性会被绑定到子组件的根元素 <div> 上。

如果 inheritAttrs: false,父组件传递的属性不会绑定到根元素,但可以通过 $attrs 手动绑定到 <input> 上。

声明的prop属性和未声明prop的属性

在 Vue 中,父组件传递给子组件的属性(attributes)可以分为两类:声明为 props 的属性 和 未声明为 props 的属性。理解这两者的区别对于掌握 Vue 的组件通信机制非常重要。
声明为 props 的属性

props 是子组件明确声明的属性,用于接收父组件传递的数据。它们是组件之间通信的主要方式之一。父组件传递的值会通过子组件的 props 被接收,并在子组件内部使用。

子组件 ChildComponent.vue:

javascript 复制代码
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
};
</script>

父组件:

javascript 复制代码
<template>
  <ChildComponent :name="parentName" :age="parentAge" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentName: "Kimi",
      parentAge: 25
    };
  }
};
</script>

在这个例子中,name 和 age 是子组件声明的 props,父组件通过 :name 和 :age 将数据传递给子组件。
未声明为 props 的属性

除了声明为 props 的属性外,父组件还可以传递其他属性(包括普通属性、事件监听器、class、style 等)。这些属性没有在子组件的 props 中声明,因此不会被子组件直接接收,但它们仍然会被传递到子组件中。

父组件:

javascript 复制代码
<template>
  <ChildComponent
    :name="parentName"
    :age="parentAge"
    class="child-class"
    style="color: red"
    @custom-event="handleCustomEvent"
    title="This is a title"
  />
</template>

子组件:

javascript 复制代码
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
};
</script>

在这个例子中:

:name 和 :age 是声明为 props 的属性。

class="child-class"、style="color: red"、@custom-event="handleCustomEvent" 和 title="This is a title" 是未声明为 props 的属性。

未声明属性的处理

1、自动继承到根元素(默认行为)

当子组件的 inheritAttrs 设置为 true(默认值)时,这些未声明的属性会自动绑定到子组件的根元素上。例如:

javascript 复制代码
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

在这种情况下,class="child-class"、style="color: red" 和 title="This is a title" 会被自动绑定到子组件的根元素 <div> 上。
2、手动处理未声明的属性

如果子组件的 inheritAttrs 设置为 false,未声明的属性不会自动绑定到根元素上,但可以通过 $attrs 访问这些属性,并手动绑定到其他元素上。

javascript 复制代码
<template>
  <div>
    <input v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  },
  inheritAttrs: false
};
</script>

在这种情况下,class、style 和 title 等属性会被绑定到 上,而不是根元素 <div>。

相关推荐
群联云防护小杜7 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
良辰未晚1 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript