Vue3 通过调用函数的方式使用组件(手写饿了么Message功能)
需求项目中可能需要频繁用到某一组件,每次使用时要定义到模板,并写相同的渲染逻辑,例如消息提示组件。我们知道element ui 可以通过引入Message方法或直接调用this.$massage使用它的消息提示组件,我们也可以手写该功能。定义要调用的Vue组件定义一个MessageCom.vue组件,接收两个属性type:消息的提示类型text:消息的提示文本这里代码省略定义要引入的函数文件定义一
·
需求
项目中可能需要频繁用到某一组件,每次使用时要定义到模板,并写相同的渲染逻辑,例如消息提示组件。
我们知道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: '用户名或密码错误' })
}
更多推荐
已为社区贡献3条内容
所有评论(0)