vue框架render方法如何替换template

目录

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

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， 依次类推逐层创建子节点, 最后的文本节点使用字符串或变量即可，无需再用[]包含。

template和render用法对比

App.vue（主入口文件）

<template>
    <ParentCmp />
</template>

<script>
import ParentCmp from './ParentCmp';
export default {
    components: {
        ParentCmp
    },
}
</script>

ParentCmp.vue (template写法)

<template>
    <div>
        <h1>我是parent组件</h1>
        <hr />
        <User style="background: #ccc" text="我是传入的文本">
            <template v-slot:header>
                <p>这是名字为header的slot</p>
            </template>
            <p>这是填充默认slot数据</p>
            <template v-slot:footer>
                <p>这是名字为footer的slot</p>
            </template>
            <template v-slot:item="props">
                <p>名字为item的作用域插槽。显示数据{{props}}</p>
            </template>
            <template v-slot:list="props">
                <p>名字为list的作用域插槽。显示数据{{props}}</p>
            </template>
        </User>
    </div>
</template>

<script>
import User from './User'
export default {
    components: {
        User
    },
    props: {},
    data() {
        return {}
    },
    methods: {}
}
</script>

User.vue (template写法)

<template>
    <div>
        <h4>{{text}}</h4>
        <slot name="header"></slot>
        <slot>默认的user slot</slot>
        <slot name="footer"></slot>
        <slot name="item" v-bind="item">item作用域插槽，展示姓名 {{item.name}}</slot>
        <slot name="list" v-bind="{list}">list作用域插槽</slot>
    </div>
</template>

<script>
export default {
    props: {
        text: String
    },
    data() {
        return {
            item: {
                name: '张三',
                age: 28,
                works: '前端、后端、设计、产品'
            },
            list: ['a','b','c']
        }
    }
}
</script>

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 (
            <div>
                <h1>我是parent组件</h1>
                <hr />
                <User 
                    style="background: #ccc" 
                    text="我是传入的文本" 
                    scopedSlots={
                        {
                            item: props => (<p>名字为item的作用域插槽。显示数据{JSON.stringify(props)}</p>),
                            list: props => (<p>名字为list的作用域插槽。显示数据{JSON.stringify(props)}</p>),
                        }
                    }
                >
                    <p slot="header">这是名字为header的slot</p>
                    <p>这是填充默认slot数据</p>
                    <p slot="footer">这是名字为footer的slot</p>
                </User>
            </div>
        ); */
    }
}

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 (
            <div>
                <h4>{this.text}</h4>
                {this.getSlot('header')}
                {this.$slots.default}
                {this.getSlot('footer')}
                {this.getSlot('item', this.item)}
                {this.getSlot('list', {list: this.list})}
            </div>
        ); */
    }
}

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