Vue3 通过调用函数的方式使用组件(手写饿了么Message功能)

需求

项目中可能需要频繁用到某一组件,每次使用时要定义到模板,并写相同的渲染逻辑,例如消息提示组件。
我们知道element ui 可以通过引入Message方法或直接调用this.$massage使用它的消息提示组件,我们也可以手写该功能。


定义要调用的Vue组件

定义一个MessageCom.vue组件,接收两个属性
type:消息的提示类型
text:消息的提示文本
这里代码省略


定义要引入的函数文件

定义一个Message.js, 这是我们之后在组件中需要引入的函数文件。
详解可看注释。

import Message from './MessageCom' // 引入组件
import { createVNode, render } from 'vue' //导入需要的vue函数
// DOM容器
const div = document.createElement('div')// 创建一个dom容器节点div
div.setAttribute('class', 'xtx-massage-container') // 为dom添加一个唯一标识类(无实质功能)
document.body.appendChild(div) // 容器追加到body中
//以上我们定义好了承装该组件虚拟dom的容器,接下来要把该组件添加到容器中,并导出为一个函数

let timer = null  // 定时器标识(用来3秒后关闭消息提示)
export default ({ type, text }) => {// 未来在使用函数时需要传入的组件的props属性
  const vnode = createVNode(Message, { type, text }) // 将组件编译为虚拟dom节点
  render(vnode, div) // 将虚拟dom添加到div容器中
//必要步骤以完成,以下为关闭消息提示的定时器功能
  clearInterval(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}

到此组件转化为函数调用的方式已经完成,接下来我们可以在组件中通过引入Message.js来直接使用该函数,但想无需引入,直接使用$message还需特殊处理。


组件中使用

两种方法

1. 通过引入函数使用

import Message from '@/components/Message'

Message({ type: 'error', text: '用户名或密码错误' })

2. 通过$massage使用

首先需要把函数注册为全局函数。
components / index.js 我写在了注册全局组件的文件中。

import Message from './Message' // 引入之前定义好的函数
export default {
  install (app) {
    // 定义原型函数
    app.config.globalProperties.$message = Message // vue3.0语法
  }
}

在main.js中挂载

import Components from './components'
createApp(App).use(Components).

到此就可以在组件中无需引入直接使用了。

注意:组合api中没有this,因此需要拿到组件实例。

选项api中

   created() {
     this.$message({ type: 'error', text: '用户名或密码错误' })
   },

Vue3组合api中:

setup(){
	const { proxy } = getCurrentInstance() // proxy为当前组件实例,getCurrentInstance为Vue方法
	proxy.$message({ type: 'error', text: '用户名或密码错误' })
}
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值