🗒️记录一次vue2函数式组件开发+单粒模式
2022-5-2
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

最近遇到个需求,需要一个类似于钉钉头部的菜单栏,因为钉钉的头部可以通过函数来渲染需要组件的样式,以及回调函数。所以,第一眼想到了,用单粒模式来模仿这个。那么我们就需要一个全局组件
 

组件编写过程

首先我们编写一个基础的vue组件,来作为基础的布局。
为了能在函数中使用render语法渲染组件,这里封装一个render.js来渲染组件
 
这个时候我们通过vue.extend这个操作语句来生产一个组件对象。并且我们可以在这个对象上操作前面的基础组件。
 
上面的代码示例中,我们通过instance对象可以操控到基础组件里面的data定义的参数。通过操作data里面的参数,传递`render`语法来控制渲染组件。其中h由于没有自动注入,所以直接使用时undefined,为了让他能正常工作,参考官网给的代码: const h = this.createElement;我们通过`instance`对象上的`$createElement`来赋值h。
最后我们通过在main.js中全局注册
 
这样的话任何页面都能通过this.$HeaderBox.addTopTitle("测试表头");这样来生成自己的样式,也可以通过扩展header.js里面的HeaderBox对象的属性来扩充基础的组件。
使用案例如下代码
 
 
 
  • Javascript
  • Vue
  • vue3源码学习-2-实现构建流程CSS3小技巧-动态设定div的宽高比
    • Waline
    目录