vue3——事件监听：v-on应用(@的应用)-CFANZ编程社区

绑定事件监听指令：v-on

缩写：@(语法糖)

v-on事件的修饰符号：

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击黑色区域时，只有黑色区域事件触发，外层的红色区域的事件无法触发。

当点击白色按钮时，黑色区域事件触发，但外层的红色区域的事件无法触发。

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击白色按钮时，黑色区域事件无法触发，因为并没有点击黑色区域本身(元素里面也不行)

当点击黑色区域，触发事件

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击黑色按钮时，由于使用事件捕获模式，所以优先触发该事件。然后触发玩使用事件捕获模式的事件侦听器后，在按照从里往外顺序触发其他事件。

<el-button @click.capture="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当红色区域和黑色区域都使用事件捕获模式时，从外往里依次触发使用事件捕获模式的事件侦听器，在按照从里往外顺序触发其他事件。

比如：

<a href="https://www.csdn.net/" @click.prevent="add('33333333333333333')">dddddddddddd</a>

当点击这个a标签时，不会跳转路由，但依旧能执行我们设置的点击事件 (没加 .prevent 虽然也能执行我们设置的点击事件，但会跳转路由)

这个顾名思义很好理解

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.once="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当我们第一次点击白色区域时。

当我们第二次点击白色区域时，因为黑色区域事件已经触发过一次了。

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击黑色按钮时，即执行了 .stop 操作又执行了 .self 操作。