vue 2.x 函数式调用组件

最新推荐文章于 2024-07-22 18:04:02 发布

易子辰丶

最新推荐文章于 2024-07-22 18:04:02 发布

阅读量1k

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/HockJerry/article/details/115750572

版权

本文介绍了Vue2.x中如何实现类似ElementUI的函数式组件，以`$message`为例。通过创建一个Message构造函数并挂载到Vue实例上，可以在任何组件中调用`this.$msg`来显示消息弹窗。组件的样式和逻辑可以根据需求进行定制，并通过setTimeout自动销毁。这种实现方式为开发者提供了便捷的全局提示组件。

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

函数式组件
相信每个朋友都用过vue的UI框架，如ElementUI，iview等
在使用时有些会用到通过一个函数来调用组件
比如Element中的this.$message()来调用一个弹出框消息的组件
这里就来跟大家说说在vue2.x是怎么实现的，vue3抽空写
文件结构：

message
·····main.vue
·····index.js
·····index.sacc

1.message.vue

<template>
  <div class="g">
    <div :class="{
      'msg-wb': 1,
      'msg-up': position=== 'up',
      'msg-down': position=== 'down',
      'msg-left': position=== 'left',
      'msg-right': position=== 'right',
      'msg-success': type === 'success',
      'msg-warning': type === 'warning',
      'msg-danger': type === 'danger',
      'msg-primary': type =