vue中事件冒泡规则和事件捕获规则 

<div id="app">
        <div @click="handleClickOne">
            <p @click="handleClickTwo">测试</p>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
               text:'hello'
            },
            methods: {
                handleClickOne() {
                    alert('父元素')
                },
                handleClickTwo() {
                    alert('子元素')
                }
            }
        })
    </script>

1.事件冒泡, 是从里到外的,  可以看到,  先 子元素  后 父元素

 

 

 

 

2.事件捕获   是从 外 到内的,  先 父元素   后 子元素   @click.capture

<div id="app">
        <div @click.capture="handleClickOne">
            <p @click.capture="handleClickTwo">测试</p>
        </div>
    </div>

 

 

 

 

 

 

 

 

   注释: 课外拓展

3.  @click.self="handleClick"

 点击 父元素内容才触发点击事件,   点 子元素 无效,  有时候 需要这样的功能   

 

 



 




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止冒泡点击事件的弊端</title>
</head>
<body>
    <div id="app">
        <div @click.self="handleClick">
            我是父元素内容
            <p>我是子元素,点我没用, 加了self</p>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
               text:'hello'
            },
            methods: {
                handleClick() {
                    alert('点击了')
                }
            }
        })
    </script>
</body>
</html>




 




<div id="app">


        <div @click="handleClickOne">


            <p @click="handleClickTwo">测试</p>


        </div>


    </div>


    <script src="./js/vue.js"></script>


    <script>




        var vm = new Vue({


            el: '#app',


            data: {


               text:'hello'


            },


            methods: {


                handleClickOne() {


                    alert('父元素')


                },


                handleClickTwo() {


                    alert('子元素')


                }


            }


        })


    </script>









            

            
posted @ 
2020-10-10 15:49 
大熊丨rapper 
阅读(692) 
评论(0) 
编辑 
收藏 
举报