Vue 组件间的事件属性透传 (05)--Vue3.x中的的应用

经过以上几个章节的学习,我们大概了解了在 Vue 中的属性透传、以及事件透传的基本概念和用法。那么他有什么实际意义呢?

其实它对于我们组件间的通信十分有用。在父组件时中调用子组件时,可以直接在子组件中绑定它半身支持的属性、事件(当然这个要求它是根节点)。

其实对于不是根节点的元素,Vue 同样提供了一些方法来帮助我们更好的开发($attrs)。不得不承认尤大确实是个很吊的人

好了,talk is cheap.

下面就用代码来做演示,我们在项目中经常会用到第三方库,我们这里安装 移动端 Vant 库作为示例

  1. 新建 vue3 项目,此处不再详述,使用命令如下

    shell 复制代码
    vue create vue3-demo // 选择默认的模板即可
    npm install vant
  2. App.vue中引入 vant 库样式文件

    javascript 复制代码
    import 'vant/lib/index.css'
  3. 我们以 Vant 中的弹出层 popup 组件为例,我们对其进行封装处理,代码如下

    js 复制代码
        <!-- vue3-demo/src/components/MyPopup.vue -->
       <template>
         <Popup
           :closeable="true"
           :show="visible"
           position="bottom"
           :style="{ height: '30%' }"
         >
           我是弹框内容
         </Popup>
       </template>
    
       <script setup>
       import { Popup } from 'vant'
       defineProps({
         visible: {
           type: Boolean,
           default: false,
         },
       })
       </script>

    上面代码中我们封装了一个 MyPopup 组件,实际上就是对 Vant 中的 Popup 组件进行了二次封装处理。同时我们在 Vant 官网中可以看到 popup 支持很多事件和属性,而我们在自定义封装组件中并没有过多使用。

    Events

    事件名 说明 回调参数
    click 点击弹出层时触发 event: MouseEvent
    click-overlay 点击遮罩层时触发 event: MouseEvent
    click-close-icon 点击关闭图标时触发 event: MouseEvent
    open 打开弹出层时立即触发 -
    close 关闭弹出层时立即触发 -
    opened 打开弹出层且动画结束后触发 -
    closed 关闭弹出层且动画结束后触发 -
  4. 在 App.vue 中引入该组件,代码如下

    javascript 复制代码
    <template>
      <div>
        <MyPopup
          :visible="visible"
          @click-overlay="handleCloseIcon"
          @click-close-icon="handleCloseIcon"
        ></MyPopup>
        <Button type="primary" @click="handleOpenPopup">打开弹框</Button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
    }
    </script>
    
    <script setup>
    import { Button } from 'vant'
    import { ref } from 'vue'
    import MyPopup from './components/MyPopup.vue'
    const visible = ref(false)
    const handleOpenPopup = () => {
      visible.value = true
    }
    const handleCloseIcon = () => {
      visible.value = false
    }
    </script>
    
    <style></style>

    我们在代码中可以看到,我们在组件身上直接使用了 @click-overlay@click-close-icon事件处理函数,通过以上章节学习,它会直接透传到子组件的根元素上。

    而子元素的根元素是 popup 组件,可以想象,它是直接回调函数的;实际应用中我们也可以看到,虽然在自定义组件内部并没有写关闭逻辑, 但是在父组件上响应点击事件关闭, 一样是可以的。

页面中的效果如下

相关推荐
顽疲2 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享36 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript