当前位置：首页 > article >正文

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

article 2025/3/15 15:53:37

native取消

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

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

//vue2代码：
<my-component @click.native="handleClick" />
//vue3代码
<my-component @click="handleClick" />

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

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子组件：

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

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

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

父组件：

<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 中声明，因此不会被子组件直接接收，但它们仍然会被传递到子组件中。

父组件：

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

子组件：

<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（默认值）时，这些未声明的属性会自动绑定到子组件的根元素上。例如：

<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 访问这些属性，并手动绑定到其他元素上。

<template>
  <div>
    <input v-bind="$attrs" />
  </div>
</template>

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