如何实现一个全局复用的自定义组件?
2020/3/3 11:31:13
本文主要是介绍如何实现一个全局复用的自定义组件?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
组件在vue开发中是必不可少的,如果一个组件在多个页面中都需要使用,那么每次都要引入,注册,使用,还是有点繁琐的。所以对那些要频繁使用的我们要实现一次引入,全局使用。
本文就带你了解自定义一个全局复用的组件(Toast),在main.js中引用组件,以后只要在需要的页面上写一句js代码即可实现效果。
先看看效果
监听点击事件。
methods: { click() { this.$toast.show("home你好啊") //实现toast弹窗 } } 复制代码
我们看看页面的结构
当我们点击按钮执行语句this.$toast.show("home你好啊")
, 就会动态去除display:none;
默认信息也会改为我们调用show函数时传递的参数。
我们要用到toast组件的时候,直接通过this.$toast调用show()方法,第一个参数是要显示的信息,第二参数是toast持续的时间(不传参数默认了1.5s)。
我们怎么将组件挂载到dom结构的呢?
简单来说就是用Vue.extend()创建一个子类,然后挂载到dom上。
需要用的Vue全局API
一,封装一个Toast组件
<template> <div class="toast" v-show="isNone"> <div >{{message}}</div> </div> </template> <script> export default { data() { return { message: '默认信息', isNone: false } }, methods: { show(message='默认信息', duration = 1500) { //默认参数 this.message = message; this.isNone = true; setTimeout(() => { //用定时器实现弹窗出现时间 this.isNone = false; this.message = '默认信息' }, duration) } } } </script> <style scoped> .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 8px; z-index: 999; color: #fff; background-color: rgba(0, 0, 0, .5); border-radius: 10px; } </style> 复制代码
结构很简单,通过属性isNone来动态控制Toast的出现和隐藏。
主要是show方法,当页面调用show方法,第一个参数会赋值给message,第二个参数可以决定Toast存在的时间(用定时器将isNone改为false)。
二, 具体实现
main.js
import Toast from './components/toast/index' Vue.use(Toast) //安装toast插件 复制代码
看到这,首先我们要了解Vue.use这api具体做了啥?
其实就是调用插件的install方法().
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
所以现在就要封装install方法。
components/toast/index.js
import Toast from './Toast' const obj = {} //对象 obj.install = function(Vue) { //封装install方法 // 1. 创建组件构造器 const toastContrustor = Vue.extend(Toast) // 2. new 组件实例 const toast = new toastContrustor(); // 3. 将组件实例, 挂载到某一个元素上 toast.$mount(document.createElement('div')) // 4. toast.$el 对应的就是div document.body.appendChild(toast.$el); // 5. 添加到原型链上 Vue.prototype.$toast = toast } export default obj 复制代码
- 先将封装好的Toast组件引入。
- 定义一个对象obj(将这个对象导出到main.js中安装)。
- 刚刚我们了解了Vue.use插件是一个对象的话,必须提供install方法,所以封装对象obj的install方法。
const toastContrustor = Vue.extend(Toast)
先通过Vue.extend创建组件构造器。(install方法调用时,会将 Vue 作为参数传入)使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
const toast = new toastContrustor();
通过new的方式 根据组件构造器创建出来一个组件实例。toast.$mount(document.createElement('div'))
将组件对象挂载到某一个元素上。document.body.appendChild(toast.$el);
将元素添加到body中。Vue.prototype.$toast = toast
将toast对象加入到Vue的原型链上,这样在每个页面都可以用this.$toast操作。- 将obj对象导出,在main.js中引入,安装,然后就大功告成了,可以在全局中通过一句js代码使用。
最后
文章有错误的地方或者可以改进的地方,欢迎各位大佬提提意见。
这是源代码,如果本文对你有点帮助的话,不妨点个赞哦。
这篇关于如何实现一个全局复用的自定义组件?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南