Vue 用createElement 自定义列表头-蒲公英云

文章目录

- Vue 用createElement 自定义列表头
- - 一、前言
  - 二、需求实现效果
  - 三、知识点
  - - 1、createElement 参数
    - - 深入 data 对象
    - 2、createElement 创建元素过程
  - 四、具体实现及代码
  - - 1、第一步：创建需要自定义列表头的table
    - 二、第二步：创建自定义组件封装el-popover
    - 三、局部注册组件并手写createElement
  - 五、扩展知识点
  - - 1、Vue源码9个基础方法

Vue 用createElement 自定义列表头

一、前言

最近产品有需求，想要把一个搜索框放入到列表头中，一般的属性无法满足我们这个需求，所以我们需要使用自定义表头。

现阶段我比较常用的table有 elementUI 的 el-table、umy-ui的u-table和 vxe-table的vxe-grid。

u-table和el-table都有提供 render-header 方便我们自定义表头。而 vxe-table 则提供了更多渲染器可以方便我们进行操作，详情可以看官方文档。这里我主要用的是umy-ui的u-table。

二、需求实现效果

在这里插入图片描述

三、知识点

1、createElement 参数

createElement 参数

接下来你需要熟悉的是如何在createElement函数中生成模板。这里是createElement接受的参数：

// @returns {VNode}
createElement(
  // {String | Object | Function}
 // 一个 HTML 标签字符串，组件选项对象，或者一个返回值
  // 类型为 String/Object 的函数，必要参数
 'div',
  // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样，您可以在 template 中使用这些属性。可选参数。
  {
  // (详情见下一节)
  },
  // {String | Array}
 // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

深入 data 对象

有一件事要注意：正如在模板语法中，v-bind:class和v-bind:style，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如innerHTML(这会取代v-html指令)。

{ 
  // 和`v-bind:class`一样的 API
  'class': { 
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: { 
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: { 
    id: 'foo'
  },
  // 组件 props
  props: { 
    myProp: 'bar'
  },
  // DOM 属性
  domProps: { 
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: { 
    click: this.clickHandler
  },
 // 仅对于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: { 
    click: this.nativeClickHandler
  },
 // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
 directives: [
    { 
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: { 
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: { 
    default: props => createElement('span', props.text)
  },
 // 如果组件是其他组件的子组件，需为插槽指定名称
 slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

2、createElement 创建元素过程

Vue 利用 createElement 方法创建 VNode，定义在 src/core/vdom/crate-element.js 中:

// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array {
// 这些都只是判断，可以无视
if (Array.isArray(data) || isPrimitive(data)) {
```
normalizationType = children
children = data
data = undefined
```
}
// 这些都只是判断，可以无视
if (isTrue(alwaysNormalize)) {
```
normalizationType = ALWAYS_NORMALIZE
```
}
return _createElement(context, tag, data, children, normalizationType)
}

createElement 方法实际上是对 _createElement 方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建 VNode 的函数 _crateElement :

export function createElement (
context: Component,
tag?: string | Class | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array {
// 只是一些判断，如果出问题了，就创建一个空的元素
if (isDef(data) && isDef((data: any)._ob)) {

process.env.NODE_ENV !== 'production' && warn(
  `Avoid using observed data object as vnode data: ${ JSON.stringify(data)}\n + 'Always create fresh vnode data objects in each render!', context // 这里\n后面应该有个`，但是不知道为什么会导致整个页面一片红，所以去掉了
)
// 如果传进来的VNodeData为undefined，则返回空元素
return createEmptyVNode()

}
// 获取 VNodeData类型
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {

tag = data.is

}
if (!tag) {

// in case of component :is set to falsy value
return createEmptyVNode()

}
// 一些判断，可以无视
// warn against non-primitive key
if (process.env.NODE_ENV !== ‘production’ &&

isDef(data) && isDef(data.key) && !isPrimitive(data.key)

) {

if (!__WEEX__ || !('@binding' in data.key)) { 
  warn(
    'Avoid using non-primitive value as key, ' +
    'use string/number value instead.',
    context
  )
}

}
// support single function children as default scoped slot
if (Array.isArray(children) &&

typeof children[0] === 'function'

) {

data = data || { }
data.scopedSlots = {  default: children[0] }
children.length = 0

}
// children 的规范化
//类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。
if (normalizationType === ALWAYS_NORMALIZE) {

// 用户手写的
children = normalizeChildren(children)

} else if (normalizationType === SIMPLE_NORMALIZE) {

// render 函数是编译生成
children = simpleNormalizeChildren(children)

}
// 经过对 children 的规范化，children 变成了一个类型为 VNode 的 Array
let vnode, ns

// 这里先对 tag 做判断，如果是 string 类型，则接着判断如果是内置的一些节点，则直接创建一个普通 VNode，
// 如果是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode，否则创建一个未知的标签的 VNode。
//如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点。
//对于 createComponent 创建组件类型的 VNode 的过程，之后再去写，本质上它还是返回了一个 VNode。

if (typeof tag === ‘string’) {

let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) { 
  // platform built-in elements
  if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') { 
    warn(
      `The .native modifier for v-on is only valid on components but it was used on <${ tag}>.`,
      context
    )
  }
  // 如果是 string 类型，则接着判断如果是内置的一些节点，则直接创建一个普通 VNode
  vnode = new VNode(
    config.parsePlatformTagName(tag), data, children,
    undefined, undefined, context
  )
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) { 
  // 是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode
  // component
  vnode = createComponent(Ctor, data, context, children, tag)
} else { 
  // 否则创建一个未知的标签的 VNode
  // unknown or unlisted namespaced elements
  // check at runtime because it may get assigned a namespace when its
  // parent normalizes children
  vnode = new VNode(
    tag, data, children,
    undefined, undefined, context
  )
}

} else {

// 如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点。
// 这里就是通过createElement 创建组件
// 本质上它还是返回了一个 VNode。
// direct component options / constructor
vnode = createComponent(tag, data, context, children)

}
if (Array.isArray(vnode)) {

return vnode

} else if (isDef(vnode)) {

if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode

} else {

return createEmptyVNode()

}
}

_createElement这个函数可以提供创建元素和创建组件两个功能。但是我们这里主要看创建元素的功能

// src/core/vdom/crate-element.js
// 创建空元素
export const createEmptyVNode = (text: string = '') => { 
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

_createElement 方法有 5 个参数：

context 表示 VNode 的上下文环境，它是 Component 类型；
tag 表示标签，它可以是一个字符串，也可以是一个 Component；
data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到他的定义；
children 表示当前 VNode 的子节点，它是任意类型的，接下来需要被规范为标准的 VNode 数组；
normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。

children 的规范化

由于 Virtual DOM 实际上是一个树状结构，每一个 VNode 可能会有若干个子节点，这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的，因为就需要把它们规范成 VNode 类型。

这里会根据 normalizationType 的不同，调用了 normaliza(children) 和 simpleNormalizeChildren(children) 方法，定义在 src/core/vdom/helpers/normalzie-children.js 中:

// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array. There are
// two cases where extra normalization is needed:

// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
// 当子节点包含组件时 - 因为功能组件可能返回一个数组而不是单个根节点元素。
// 在这种情况下，只需要一个简单的规范化——如果有任何子节点是一个数组，
// 我们用 Array.prototype.concat 将整个事物展平。
// 它保证只有 1 级深度，因为功能组件已经规范了他们自己的子元素。
export function simpleNormalizeChildren (children: any) {
for (let i = 0; i < children.length; i++) {

if (Array.isArray(children[i])) { 
  return Array.prototype.concat.apply([], children)
}

}
return children
}

// 2. When the children contains constructs that always generated nested Arrays,
// e.g.

文章目录