东莞网页网站制作产品推广渠道

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>

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