vue中this.$createElement方法的使用

 更新时间:2022年07月28日 17:01:30   作者:安安安安安沅  
这篇文章主要介绍了vue中this.$createElement方法的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue this.$createElement方法

element ui中的slider的marks属性中使用到this.$createElement方法设置标记样式:

在这里插入图片描述

上面虽然只用到两个参数,实际上,此方法有三个参数:

①第一个参数为标签,即创建的节点元素的标签是什么

②第二个参数是属性配置,如class、style等

③第三个参数是节点元素的内容

this.$createElement方法的写法

const h = this.$createElement;
this.$info({
     title: 'This is a notification message',
     content: h('div', {}, [
         h('p', 'some messages...some messages...'),
         h('p', 'some messages...some messages...'),
     ]),
     onOk() {},
});

生成的对话框如下:

在这里插入图片描述

使用第二个参数进行属性配置,例如以下代码:

h('div', { class: 'test' }, [
  h('p', 'some messages...some messages...'),
  h('p', 'some messages...some messages...')
])

生成的是:

在这里插入图片描述

可以看出,dom元素上多了class属性

再试试以下代码:

h('div', 
  {
    style: {
      color: 'green'
    }
  }, [
    h('p', 'some messages...some messages...'),
    h('p', 'some messages...some messages...')
])

生成的对话框的字体就会变成绿色:

在这里插入图片描述

关于createElement使用实例

Vue 提供了createElement 来创建虚拟dom,方便我们来函数化的方式来定义复杂的组件结构。在组件定义的时候,通常render函数的参数里都会带上该函数的引用。方便用户调用。

参数说明

createElement 默认暴露给用户传递3个参数,参考文档代码介绍:

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象,或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

使用示例

//创建一个div节点
createElement("div", {
	 return createElement("div", {
        domProps: {
          innerHTML: "hello !"
        }
      })
})
// 按照组件名来返回一个虚拟dom
createElement("component-name", {
   props: {
      name: "hello"
  }
})

//  设置子对象
return createElement("div", {
     class: "box"
}, [
   createElement("span", {
     domProps: {
           innerHTML: 'bob !'
     }
   })
 ])

源码解读

createElement 最终是通过调用new VNode 来创建虚拟dom,函数在调用new VNode之前处理了很多限制的情况,比如:data不能是响应式数据,tag是否为空等等,详见下面代码中的中文注释

function _createElement (
    context,
    tag,
    data,
    children,
    normalizationType
  ) {
    if (isDef(data) && isDef((data).__ob__)) { //检测是否是响应式数据
      warn(
        "Avoid using observed data object as vnode data: " + (JSON.stringify(data)) + "\n" +
        'Always create fresh vnode data objects in each render!',
        context
      );
      return createEmptyVNode()
    }
    // object syntax in v-bind
    if (isDef(data) && isDef(data.is)) { //检测data中是否有is属性,是的话tag替换为is指向的内容,处理动态组件
      tag = data.is;
    }
    if (!tag) { // tag如果为空,创建空虚拟节点
      // in case of component :is set to falsy value
      return createEmptyVNode()
    }
    // warn against non-primitive key
    if (isDef(data) && isDef(data.key) && !isPrimitive(data.key) // 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的两种模式
    if (normalizationType === ALWAYS_NORMALIZE) {
      children = normalizeChildren(children);
    } else if (normalizationType === SIMPLE_NORMALIZE) {
      children = simpleNormalizeChildren(children);
    }
    var vnode, ns;
    if (typeof tag === 'string') {
      var Ctor;
      ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
      if (config.isReservedTag(tag)) { // 判读是否是标准的html 标签
        // platform built-in elements
        vnode = new VNode(
          config.parsePlatformTagName(tag), data, children,
          undefined, undefined, context
        );
      } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {// 如果tag对应的是组件名,创建组件
        // component
        vnode = createComponent(Ctor, data, context, children, tag);
      } else {
        // 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 {
      // 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()
    }
  }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • vue 微信扫码登录(自定义样式)

    vue 微信扫码登录(自定义样式)

    这篇文章主要介绍了vue 微信扫码登录(自定义样式),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • VUE中路由变化this.$router(push\replace\go\back)解读

    VUE中路由变化this.$router(push\replace\go\back)解读

    这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue使用引用库中的方法附源码

    vue使用引用库中的方法附源码

    当vue使用库中的getvalue方法时,需要调用相关方法,通过定义ref=“”,使用this.$refs.exampleEditor._setValue(''),具体示例代码参考下本文,对vue使用引用库中的方法,感兴趣的朋友一起看看吧
    2021-07-07
  • Vue $router.push打开新窗口的实现方法

    Vue $router.push打开新窗口的实现方法

    在Vue中,$router.push方法默认不支持在新窗口中打开页面,但通过结合window.open方法和$router.resolve方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
    2021-10-10
  • Ant Design Vue 添加区分中英文的长度校验功能

    Ant Design Vue 添加区分中英文的长度校验功能

    这篇文章主要介绍了Ant Design Vue 添加区分中英文的长度校验功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下功能,
    2020-01-01
  • 浅析Vue3如何实现页面访问拦截

    浅析Vue3如何实现页面访问拦截

    在Vue3中,页面访问拦截(Navigation Guards)是一种常见的路由控制机制,那么Vue3具体是如何实现这一功能的呢,下面就跟随小编一起来学习一下吧
    2024-03-03
  • Vue中的动态路由匹配路由问题

    Vue中的动态路由匹配路由问题

    这篇文章主要介绍了Vue中的动态路由匹配路由问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue.js3.2的vnode部分优化升级使用示例详解

    Vue.js3.2的vnode部分优化升级使用示例详解

    这篇文章主要为大家介绍了Vue.js3.2的vnode部分优化升级使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论