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>。

相关推荐
sorryhc10 分钟前
解读Ant Design X API流式响应和流式渲染的原理
前端·react.js·ai 编程
1024小神14 分钟前
vue/react前端项目打包的时候加上时间,防止后端扯皮
前端·vue.js·react.js
拉不动的猪20 分钟前
刷刷题35(uniapp中级实际项目问题-2)
前端·javascript·面试
bigcarp26 分钟前
理解langchain langgraph 官方文档示例代码中的MemorySaver
java·前端·langchain
FreeCultureBoy28 分钟前
从 VS Code 的插件市场下载扩展插件
前端
前端菜鸟日常39 分钟前
Webpack 和 Vite 的主要区别
前端·webpack·node.js
仙魁XAN1 小时前
Flutter 学习之旅 之 flutter 在设备上进行 全面屏 设置/隐藏状态栏/隐藏导航栏 设置
前端·学习·flutter
hrrrrb2 小时前
【CSS3】化神篇
前端·css·css3
木木黄木木2 小时前
HTML5拼图游戏开发经验分享
前端·html·html5
Java程序之猿2 小时前
Docker 部署Spring boot + Vue(若依为例)
vue.js·spring boot·docker