date
Mar 25, 2023 03:21 AM
type
status
slug
summary
tags
category
updated
Oct 24, 2024 12:53 PM
icon
password
前言
最近遇到个需求，需要一个类似于钉钉头部的菜单栏，因为钉钉的头部可以通过函数来渲染需要组件的样式，以及回调函数。所以，第一眼想到了，用单粒模式来模仿这个。那么我们就需要一个全局组件
组件编写过程
首先我们编写一个基础的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对象的属性来扩充基础的组件。
使用案例如下代码