vue全家桶进阶之路10：修饰符

Vue2 中的修饰符是指在指令后面添加点号（.）和修饰符名称的方式，用于控制指令的行为。修饰符可以分为事件修饰符和属性修饰符两种类型，下面分别介绍它们的作用和使用方法。

事件修饰符

事件修饰符用于控制事件的行为，以下是常用的事件修饰符：

• .stop - 阻止事件冒泡，即不再向父级元素传递事件。
• .prevent - 阻止默认事件，即阻止元素的默认行为，例如 click 事件将不会触发跳转链接或表单提交。
• .capture - 使用事件捕获模式，即从最外层开始触发事件。
• .self - 只有事件是由当前元素触发时才触发事件。
• .once - 事件只触发一次。
• .passive - 提示浏览器可以安全地忽略对事件的默认行为的阻止。
• .native - 监听组件根元素的原生事件。

事件修饰符的使用方法是在事件名称后面添加修饰符，例如：

<!-- 阻止事件冒泡 -->
<div @click.stop="handleClick"></div>

<!-- 阻止默认事件 -->
<button type="submit" @click.prevent="handleSubmit"></button>

<!-- 只有事件由当前元素触发时才触发事件 -->
<div @click.self="handleClick"></div>

<!-- 事件只触发一次 -->
<button @click.once="handleClick"></button>

属性修饰符

属性修饰符用于控制属性的行为，以下是常用的属性修饰符：

• .prop - 将属性绑定到组件的一个 prop 上，通常与自定义组件配合使用。
• .camel - 将属性名转换为驼峰式命名。
• .sync - 双向绑定，将属性值和事件绑定起来，修改属性值时触发相应的事件。

属性修饰符的使用方法是在指令名称后面添加修饰符，例如：

<!-- 绑定到组件的一个 prop 上 -->
<my-component :some-prop.prop="value"></my-component>

<!-- 将属性名转换为驼峰式命名 -->
<div :data-some-attr.camel="value"></div>

<!-- 双向绑定 -->
<my-component :some-prop.sync="value" @update:some-prop="value = $event"></my-component>

这些修饰符可以方便地控制指令的行为，提高 Vue2 应用的开发效率和可维护性。