vue框架render方法替换template

一. 使用template属性创建组件模板

import Vue from 'vue'

const Item = Vue.component('Item', {
  template: `<div>
                <h2>子组件</h2>
                <slot></slot>
              </div>`
})
const app = new Vue({
  el: '#app',
  template: `<div ref="myDiv">              <item ref="item">
                <p ref="p">this is a slot</p>
              </item>
            </div>`,
 data: {
    count: 0  },
  components: {
    Item
  }
})
复制代码

二. 把父组件的template创建换成使用render方法创建

const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  render (createElement) {
    return createElement(
      'div', {
        ref: 'myDiv',
        // domProps: {
        //    innerHTML: '<span>注意：添加该属性会把后面的子节点覆盖</span>'
        // },
        attrs: {
            id: 'test-id',
            title: 'test-title'  
        }
      },
      [
        createElement('item', {
          ref: 'item'
        },
        [
          createElement('p', {
            ref: 'p'
          }, 'this is a slot')
        ])
      ])
  },
  components: {
    Item
  }
})复制代码

1 . 如上面更改后的代码，render方法内传入createElement函数,接下来使用createElement函数来创建节点。

2. 函数方法格式 createElement('节点或组件名称'， {节点属性}, [子节点])

3. 先创建一个div元素, 内部包含ref='myDiv'的属性, 使用数组存放其子节点

4. 数组内子节点是 item组件, 属性是 ref="item", 其子节点为p， 依次类推逐层创建子节点, 最后的文本节点使用字符串或变量即可，无需再用[]包含。