Vue的@click、@click.prevent、@click.stop

1、@click，绑定监听（单击事件）

        v-on:click="function"

        @click="function"

        @click="function(params)"

<button id="test1" @click="test1">test1</button>
<!-- params：参数 -->
<button id="test2" @click="test2('parpams')">test2</button>
<button id="test3" @click="test3('params', $event)">test3</button>
 
methods: {
    test1(value) {
      //test1函数没有参数，默认传递 $event
      let test1 = document.getElementById("test1");
      test1.innerHTML = value;
    },
    test2(value) {
      // test2有参数则传递该参数
      let test2 = document.getElementById("test2");
      test2.innerHTML = value;
    },
    test3(value, event) {
      // 有参数想获取到event事件，则方法中需要写$event传递
      let test2 = document.getElementById("test3");
      test2.innerHTML = value + "---" + event;
    },
},

2、@click.prevent，阻止事件默认行为

什么是事件默认行为？

当一个事件发生的时候浏览器自己会默认做的事；例如：点击a标签，网页会自动跳转到相应的网页、鼠标右击时会出现右键菜单栏、滚动鼠标滚轮时，网页会随之进行滑动.......

3、@click.stop，阻止事件冒泡

什么是事件冒泡？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或事件返回true,那么这个事件会向这个对象的的父级传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者到达了对象层次的最顶层，即document对象。