vue3中用全局服务的形式调用一个组件 |
您所在的位置：网站首页 › html中span标签的用法 › vue3中用全局服务的形式调用一个组件 |
|
在vue项目中，通常使用一个组件需要在template中以标准的标签形式来显示的使用，但是很多时候，我不希望写模板语法，而是希望通过纯js函数调用的形式来调用组件，那么又应该如何做呢？今天就参考element-plus来编写一个message组件，主要是记录一下这个过程。 使用过element ui 的人都知道它提供了很多全局方法来调用组件，比如一个提示组件message，其主要有两种用法： 全局注册了组件后,在组件内部全局属性直接使用 // main.js import message from './message.js' app.use(message) // 组件内部 this.$message.success('xxxx') this.$message({ type:'success', message:'成功2' }) 通过导入服务的形式调用 ,可以用于选项式或者setup中通用 import message from './message.js' message({ type:'success', message:'成功' }) message.success('成功') message.success('失败') 好废话不多说，我们先得有这么一个sfc组件，基本代码如下： message.vue {{ message }} x import { defineProps, defineOptions, useAttrs } from "vue"; defineOptions({ inheritAttrs: false, }); const attrs = useAttrs(); const props = defineProps({ message: { type: String, }, type: { type: String, }, duration: { type: Number, default: 3000, }, }); function close() { if(props.duration){ attrs.close && attrs.close(); } } .message { padding: 8px 16px; border-radius: 4px; background-color: #ddd; display: flex; justify-content: space-between; color: #fff; } .close { cursor: pointer; } .message-success { background-color: #67c23a; } .message-error { background-color: #f56c6c; }要想通过app的use方法并且注册组组件，首先需要暴露一个函数，或者一个提供了install方法的对象，如下： message.js import { createVNode, render } from "vue"; import Message from "./message.vue"; function getInstance(config) { const div = document.createElement("div"); const conf = Object.assign({}, config); if (conf.duration === undefined) { conf.duration = 3000; } const close = () => { try { document.body.removeChild(div); } catch (error) {} }; conf.close = close; const vnode = createVNode(Message, conf); render(vnode, div); document.body.appendChild(div); if (conf.duration) { setTimeout(() => { try { document.body.removeChild(div); } catch (error) { } }, conf.duration); } return { close, }; } const message = (opts) => { return getInstance(opts); }; message.install = (app) => { // 这样就可以值选项式api中通过this.$message的形式调用了 返回一个包含close的对象，可以手动关闭，也支持自动关闭 app.config.globalProperties.$message = message; }; export default message;为了丰富常用功能，需要给message提供两个快捷方法： message.success = (msg) => { let conf = { type: "success", message: msg, }; return getInstance(conf); }; message.error = (msg) => { let conf = { type: "success", message: msg, }; return getInstance(conf); };至此第一种方式通过this调用可以了，聪明的你也一定发现，其实可以不用全局注册，然后组合式api中直接导入message,然后就可以服务的形式来调用了。 最后，看了vue3的实现方式，是不是非常简单呢？你学废了吗？当然请想一下如果vue2又该如何实现呢? 欢迎点赞收藏吐槽指点。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |