vue3 Event子元素
时间: 2023-09-12 22:06:58 浏览: 43
Vue 3 中的事件子元素是通过特殊的 `v-on` 指令来处理的。在 Vue 3 中,`v-on` 指令已被重命名为 `@` 符,用于绑定事件。
要将事件绑定到子元素上,可以将 `@` 符号直接放置在子元素上,并使用相应的事件名称来指定要绑定的事件。例如:
```html
<template>
<div>
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log("按钮被点击了");
},
},
};
</script>
```
在上面的示例中,我们将点击事件绑定到了一个按钮上,当按钮被点击时,`handleClick` 方法将被调用,并输出一个日志信息。
需要注意的是,`v-on` (`@`) 事件指令可以用于任何 HTML 元素上,不仅仅限于子元素。您可以根据需要将事件绑定到不同的元素上。
相关问题
vue点击子元素不触发父元素
可以在子元素的点击事件中加上 `event.stopPropagation()` 方法,以阻止事件冒泡到父元素,例如:
```html
<template>
<div class="parent" @click="parentClick">
<div class="child" @click="childClick"></div>
</div>
</template>
<script>
export default {
methods: {
parentClick() {
console.log('parent clicked');
},
childClick(event) {
event.stopPropagation();
console.log('child clicked');
},
},
};
</script>
```
这样,当点击子元素时,只会触发子元素的点击事件,父元素的点击事件不会被触发。
vue事件委托 子元素中嵌套了其他元素 获取dateset
在 Vue 中实现事件委托可以使用 v-on 指令和事件修饰符。针对子元素中嵌套了其他元素的情况,可以使用事件捕获和事件冒泡机制来实现事件委托。
假设父元素是一个 ul,子元素是 li,li 中包含一个 span 元素,我们可以使用事件冒泡机制来代理 li 和 span 元素的点击事件,示例代码如下:
```html
<template>
<ul v-on:click="handleClick">
<li data-index="1">
<span>item 1</span>
</li>
<li data-index="2">
<span>item 2</span>
</li>
</ul>
</template>
<script>
export default {
methods: {
handleClick(event) {
const target = event.target
if (target.tagName === 'LI') {
console.log(target.dataset.index)
} else if (target.tagName === 'SPAN') {
console.log(target.parentNode.dataset.index)
}
}
}
}
</script>
```
在 handleClick 方法中,我们通过 event.target 获取到当前被点击的元素,如果是 li 元素,则直接获取其 dataset.index 的值;如果是 span 元素,则获取其父元素 li 的 dataset.index 值。
需要注意的是,在使用事件委托时,我们需要确保事件冒泡不被阻止,否则事件将无法正确地冒泡到父元素上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)