vue h 绑定事件

Vue中可以使用 `v-on` 或者简写 `@` 来绑定事件。在模板中使用 `v-on` 或 `@` 后面跟上事件名和需要执行的方法即可。

以下是一个简单的示例：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

在上述示例中，我们使用 `@click` 绑定了点击事件，并指定了一个名为 `handleClick` 的方法来处理点击事件。当用户点击按钮时，`handleClick` 方法将被调用。

你可以根据具体的需求替换 `@click` 为其他事件，如 `@mouseover`、`@keydown` 等。方法名也可以根据需要自行命名。

相关问题

vue2 自定义事件

在Vue2中，自定义事件是通过使用`$emit`方法来触发和传递数据的。你可以定义一个自定义事件名，并在组件内部使用`$emit`方法触发该事件。然后，在父组件中使用`v-on`指令来监听该自定义事件并执行相应的方法。

例如，在父组件App.vue中，你可以绑定一个自定义事件`update-count`，并在子组件中触发该事件，并把学生名作为参数传递给父组件。然后，在父组件中定义一个名为`changeCount`的方法来处理该事件，并将传递的学生名显示出来。

下面是一个示例代码：

<template>
  <div id="app">
    <!-- 绑定自定义事件update-count -->
    <child v-on:update-count="changeCount"></child>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import Child from './components/Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      count: ''
    };
  },
  methods: {
    changeCount(studentName) {
      this.count = studentName;
    }
  }
}
</script>

在子组件Child.vue中，你需要触发自定义事件`update-count`并传递学生名作为参数。可以使用`$emit`方法来实现：

<template>
  <div>
    <button @click="sendName">发送学生名</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendName() {
      const studentName = '张三'; // 这里可以根据具体情况获取学生名
      this.$emit('update-count', studentName);
    }
  }
}
</script>

当你点击子组件中的按钮时，父组件App.vue中的`changeCount`方法会被调用，并将传递的学生名显示在页面上。

总结起来，Vue2中的自定义事件是通过使用`$emit`方法触发和传递数据的，可以在父组件中使用`v-on`指令监听该事件并执行相应的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2知识点：组件自定义事件](https://blog.csdn.net/a924382407/article/details/124994995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【Vue2】组件通信 之 自定义事件](https://blog.csdn.net/Superman_H/article/details/122834638)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue3 h函数阻止事件冒泡

在 Vue 3 中，h 函数本身并不提供阻止事件冒泡的功能。阻止事件冒泡通常是通过事件处理函数来实现的，而不是在创建虚拟 DOM 元素时完成的。

如果你需要在使用 h 函数创建的元素上阻止事件冒泡，可以在该元素的事件处理函数中使用事件对象的 stopPropagation 方法来阻止事件继续冒泡。

例如，假设你创建了一个按钮元素，并且希望在点击按钮时阻止事件冒泡，可以像下面这样编写代码：

import { createApp, h } from 'vue';

const app = createApp({
  methods: {
    handleClick(event) {
      event.stopPropagation();
      console.log('Button clicked');
    },
  },
  render() {
    return h('button', { onClick: this.handleClick }, 'Click me');
  },
});

app.mount('#app');

在上面的代码中，我们通过传递一个 onClick 属性给 h 函数来指定按钮的点击事件处理函数。在 handleClick 方法中，我们调用了 event.stopPropagation() 方法来阻止事件冒泡。

请注意，这里的示例是基于 Vue 3 的 Composition API 的写法，使用了 setup 函数。如果你使用的是 Vue 3 的 Options API，你可以将方法定义在 methods 对象中，并在模板中通过 @click 事件绑定调用方法。

总结起来，虽然 h 函数本身并不提供阻止事件冒泡的功能，但你可以在使用 h 函数创建的元素的事件处理函数中使用 event.stopPropagation() 方法来实现阻止事件冒泡的效果。