vue框架render方法如何替换template

目录

• render方法替换template
• 使用template属性创建组件模板
• 把父组件的template创建换成使用render方法创建
• template和render用法对比

render方法替换template

使用template属性创建组件模板

import Vue from 'vue'
 
const Item = Vue.component('Item', {
  template: `

                
子组件
                
              
`
})
const app = new Vue({
  el: '#app',
  template: `
              
                
this is a slot
              
            
`,
 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: '注意：添加该属性会把后面的子节点覆盖'
        // },
        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， 依次类推逐层创建子节点, 最后的文本节点使用字符串或变量即可，无需再用[]包含。

template和render用法对比

App.vue（主入口文件）

ParentCmp.vue (template写法)

User.vue (template写法)

ParentCmp.js (render写法)

import User from './User'
export default {
    props: {},
    data() {
        return {}
    },
    methods: {},
    render(h) {
        return h('div',[
            h('h1', '我是parent组件'),
            h('hr'),
            h(User, {
                props: {
                    text: '我是传入的文本'
                },
                style: {
                    background: '#ccc'
                },
                // 作用域插槽写在scopedSlots里
                scopedSlots: {
                    item: props => h('p', `名字为item的作用域插槽。显示数据${JSON.stringify(props)}`),
                    list: props => h('p', `名字为list的作用域插槽。显示数据${JSON.stringify(props)}`)
                }
            }, 
            // 非作用域插槽写数组里
            [
                h('p', {slot: 'header'}, '这是名字为header的slot'),
                h('p', '这是填充默认slot数据'),
                h('p', {slot: 'footer'}, '这是名字为footer的slot'),
            ])
        ]);
        // jxs写法
        /* return (
            

                
我是parent组件
                

                 (
名字为item的作用域插槽。显示数据{JSON.stringify(props)}
),
                            list: props => (
名字为list的作用域插槽。显示数据{JSON.stringify(props)}
),
                        }
                    }
                >
                    
这是名字为header的slot
                    
这是填充默认slot数据
                    
这是名字为footer的slot
                
            
        ); */
    }
}

User.js (render写法)

export default {
    props: {
        text: String
    },
    data () {
        return {
            item: {
                name: '张三',
                age: 28,
                works: '前端、后端、设计、产品'
            },
            list: ['a', 'b', 'c']
        }
    },
    methods: {
        getSlot (name, data) {
            if (this.$scopedSlots[name]) {
                return this.$scopedSlots[name](data);
            } else if (this.$slots[name]) {
                return this.$slots[name];
            }
    
            return undefined;
        },
    },
    render (h) {
        return h('div', [
            h('h4', this.text),
            this.getSlot('header'),
            this.$slots.default,
            this.getSlot('footer'),
            this.getSlot('item', this.item),
            this.getSlot('list', {list: this.list}),
        ])
        // jxs写法
        /* return (
            

                
{this.text}
                {this.getSlot('header')}
                {this.$slots.default}
                {this.getSlot('footer')}
                {this.getSlot('item', this.item)}
                {this.getSlot('list', {list: this.list})}
            
        ); */
    }
}

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