vue封装的组件如何在调用时绑定click事件

最新推荐文章于 2024-06-06 12:16:56 发布

独孤九溅

最新推荐文章于 2024-06-06 12:16:56 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue项目

本文链接：https://blog.youkuaiyun.com/weixin_43169949/article/details/99477534

Vue项目专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了在Vue.js中如何实现子组件向父组件传递事件和数据。通过具体代码示例，展示了子组件如何使用@click绑定事件，并在父组件中定义相应的方法来接收和处理这些事件，实现组件间的有效通信。

我们在开发中会封装许多的通用的组件，那么如何封装好一个组件时，在调用的时候绑定click事件呢？
1.child组件

<template>
    <div class="child"  @click="$emit'childClick',123) />
   //说明：第一个参数：childClick ，是事件名，在调用的时候需要用到，第二个参数123，是你在调用的时候传给父组件的值
</template>

2.parent组件

<template>
   <Child @childClick ="childClick ($event)"/>
</template>

<script>
    exxport defaut{
      component:{
         Child:()=>import('./child')
      },
      methods:{
         childClick(v){
           console.log(v) //123
         }
   }
</script>