第六节——Vue中的事件

一、定义事件

Vue 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同

使用@修饰符（v-on:的缩写）+事件名的方式 给dom添加事件后面跟方法名，方法名可以直接加括号如@click="add()"里面进行传参。对应的事件处理函数必须在 methods对象中定义。

<template>
  <div>
    <!-- 在button上定义点击事件 -->
    <button @click="hello('传入的参数')">你好</button>
  </div>
</template>
<script>
export default {

  /**
   * methods 在vue定义 方法的属性对象
   * 所有的方法都必须在methods里面定义
   */
  methods: {
    hello (msg) {
      console.log("事件触发啦哈哈哈")
      console.log(msg)
    }
  }
}

</script>

二、事件修饰符

为了更好地处理事件，Vue3提供了一些便利的事件修饰符。事件修饰符可以用于改变默认事件行为、限制事件触发条件等如.stop、.prevent、.capture、.self、.once等等。下面是一些常用的事件修饰符用法

1、.stop

阻止事件冒泡，即停止事件在父元素中的传播。

<template>
  <div class="box"  @click="handle2">
    <div class="box2" @click="handle"></div>
  </div>
</template>

<script>
export default {

  methods: {
    handle () {
      console.log('触发')
    },

    handle2 () {
      console.log("冒泡")
    }
  }
}

</script>

2、.prevent

阻止事件的默认行为，如提交表单或点击链接后的页面跳转。

<template>
  <!-- 只触发点击事件，不触发跳转 -->
  <a href="https://www.baidu.com" @click.prevent="handle">百度</a>
</template>

<script>
export default {
  methods: {
    handle() {
      console.log("触发");
    }
  },
};
</script>

3、.once

只触发一次事件处理方法，之后解绑事件

<template>
  <button @click.once="handle">点击一次就失效</button>
</template>

<script>
export default {
  methods: {
    handle() {
      console.log("触发");
    },
  },
};
</script>

三、event对象

1、默认传入获取event

<template>
  <!-- 
    如果事件什么都不传、并且不写()
    那么事件处理函数会默认接收到event对象
   -->
  <button @click="handle">点击</button>
</template>

<script>
export default {
  methods: {
    handle(event) {
      console.log(event);
    },
  },
};
</script>

2、携带其他参数获取event

<template>
  <!-- 
    使用在template里面使用$event获取当前事件的event对象
   -->
  <button @click="handle('第一个参数', $event)">点击</button>
</template>

<script>
export default {
  methods: {
    handle(msg, event) {
      console.log(event);
    },
  },
};
</script>

四、在函数内使用this获取当前Vue上下文

可以直接使用this.xx 使用data里定义的状态，或者使用this.xx()调用methods里面定义的其他函数

注意：this指向问题

<template>
  <button @click="handle">点击</button>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },

  methods: {
    handle() {
      console.log(this.num);
      this.handle2()
    },
    handle2() {
      console.log("第二个方法");
    },
  },
};
</script>