vue框架render方法怎么替换template

本篇内容介绍了"vue框架render方法怎么替换template"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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('h2', '我是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('h5', 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})}            
        ); */    }}

"vue框架render方法怎么替换template"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！