Vue - 事件处理器 - 自定义组件 - 综合案例

_Leaf1217

已于 2022-09-04 21:52:22 修改

阅读量825

点赞数 1

分类专栏： Vue 文章标签： javascript 前端 vue.js

于 2022-09-04 21:36:50 首次发布

本文链接：https://blog.csdn.net/qq_63492318/article/details/126694993

版权

一、事件处理器

1.1 冒泡事件

我们首先来定义一个冒泡事件，为了效果明显，还准备一些样式，方便理解。

这里就直接放上写好的冒泡事件代码了。

冒泡事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title>事件处理器</title>

<!-- 配合的样式 -->
<style type="text/css">
    .red{
        height: 400px;
        width: 400px;
        background-color: red;
    }
    .yellow{
        height: 300px;
        width: 300px;
        background-color: yellow;
    }
    .blue{
        height: 200px;
        width: 200px;
        background-color: blue;
    }
    .green{
        height: 100px;
        width: 100px;
        background-color: green;
    }
</style>
</head>
<body>
<div id="app">
    <p>《冒泡排序》</p>
    <div class="red" @click="red">
    <div class="yellow" @click="yellow">
    <div class="blue" @click="blue">
    <div class="green" @click="green"></div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
    el:"#app",
data(){
return {
    msg:"hello Leaf!!!"
}
},
methods:{
    red(){
    alert("red");
    },
    yellow(){
    alert("yellow");
    },
    blue(){
    alert("blue");
    },
    green(){
    alert("green");
    }
}
})
</script>
</html>

我们测试一下：

看着似乎没有任何问题，但是我们点击确定：

结果我们发现它不止弹出了点击的那个颜色，同时还弹出了它的所有父级div颜色；

这样肯定是不行的，所以我们需要来阻止它的连续冒泡行为；

只要这样添加上.stop就好啦~

<p>《阻止冒泡》</p>
<div class="red" @click="red">
    <div class="yellow" @click.stop="yellow">
        <div class="blue" @click.stop="blue">
            <div class="green" @click.stop="green">
            </div>
        </div>
    </div>
</div>

这里就不放结果截图了，反正长的都一样嘿嘿...