vue中this.$createElement方法的使用

更新時(shí)間：2022年07月28日 17:01:30 作者：安安安安安沅

這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue this.$createElement方法

element ui中的slider的marks屬性中使用到this.$createElement方法設(shè)置標(biāo)記樣式：

在這里插入圖片描述

上面雖然只用到兩個(gè)參數(shù)，實(shí)際上，此方法有三個(gè)參數(shù)：

①第一個(gè)參數(shù)為標(biāo)簽，即創(chuàng)建的節(jié)點(diǎn)元素的標(biāo)簽是什么

②第二個(gè)參數(shù)是屬性配置，如class、style等

③第三個(gè)參數(shù)是節(jié)點(diǎn)元素的內(nèi)容

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() {},
});

生成的對(duì)話框如下：

在這里插入圖片描述

使用第二個(gè)參數(shù)進(jìn)行屬性配置，例如以下代碼：

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...')
])

生成的對(duì)話框的字體就會(huì)變成綠色：

在這里插入圖片描述

關(guān)于createElement使用實(shí)例

Vue 提供了createElement 來創(chuàng)建虛擬dom，方便我們來函數(shù)化的方式來定義復(fù)雜的組件結(jié)構(gòu)。在組件定義的時(shí)候，通常render函數(shù)的參數(shù)里都會(huì)帶上該函數(shù)的引用。方便用戶調(diào)用。

參數(shù)說明

createElement 默認(rèn)暴露給用戶傳遞3個(gè)參數(shù)，參考文檔代碼介紹：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象，或者
  // resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。
  'div',

  // {Object}
  // 一個(gè)與模板中屬性對(duì)應(yīng)的數(shù)據(jù)對(duì)象?？蛇x。
  {
    // (詳情見下一節(jié))
  },

  // {String | Array}
  // 子級(jí)虛擬節(jié)點(diǎn) (VNodes)，由 `createElement()` 構(gòu)建而成，
  // 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”?？蛇x。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

使用示例

//創(chuàng)建一個(gè)div節(jié)點(diǎn)
createElement("div", {
	 return createElement("div", {
        domProps: {
          innerHTML: "hello !"
        }
      })
})
// 按照組件名來返回一個(gè)虛擬dom
createElement("component-name", {
   props: {
      name: "hello"
  }
}）

//  設(shè)置子對(duì)象
return createElement("div", {
     class: "box"
}, [
   createElement("span", {
     domProps: {
           innerHTML: 'bob !'
     }
   })
 ])

源碼解讀

createElement 最終是通過調(diào)用new VNode 來創(chuàng)建虛擬dom，函數(shù)在調(diào)用new VNode之前處理了很多限制的情況，比如：data不能是響應(yīng)式數(shù)據(jù)，tag是否為空等等，詳見下面代碼中的中文注釋

function _createElement (
    context,
    tag,
    data,
    children,
    normalizationType
  ) {
    if (isDef(data) && isDef((data).__ob__)) { //檢測(cè)是否是響應(yīng)式數(shù)據(jù)
      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)) { //檢測(cè)data中是否有is屬性，是的話tag替換為is指向的內(nèi)容，處理動(dòng)態(tài)組件
      tag = data.is;
    }
    if (!tag) { // tag如果為空，創(chuàng)建空虛擬節(jié)點(diǎn)
      // 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如果定義了必須是數(shù)字或者字符串
    ) {
      {
        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;
    }
    // 標(biāo)準(zhǔn)化處理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)) { // 判讀是否是標(biāo)準(zhǔn)的html 標(biāo)簽
        // 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對(duì)應(yīng)的是組件名，創(chuàng)建組件
        // 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()
    }
  }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: