vue3 事件对象和自定义事件实现传值

最新推荐文章于 2024-08-30 19:58:42 发布

前端小云儿

最新推荐文章于 2024-08-30 19:58:42 发布

阅读量289

点赞数

分类专栏： vue3知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136841088

版权

vue3知识点专栏收录该内容

87 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在Vue3中如何利用事件对象处理DOM元素事件，并介绍了通过自定义事件实现子组件向父组件传递值的方法。在父组件中，使用@xxx监听子组件触发的事件，而在子组件中，通过defineEmits定义并触发自定义事件。

摘要由CSDN通过智能技术生成

1事件对象 dom元素，

<template>
  <div>
    <h1>事件对象,固定写法参数为$event</h1>
    <el-button @click="click($event)">点击事件对象</el-button>
    <div>1</div>
    <h3>给子组件声明一个事件xxx</h3>
    <userDetailsCom @xxx="xxxFun"></userDetailsCom>
    <h3>展示sum：{
  { sum }}</h3>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import userDetailsCom from './userDetailsCom.vue'
function click(e) {
  console.log(e.target.innerText) //获取到【点击事件对象】
}
let sum = ref(10)
function xxxFun(val) {
  console.log(val)
  sum.value = sum.value + val
}
</script>
<style scoped>
.flex {
  display: flex;