vue框架render方法怎么替换template

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

render方法替换template

使用template属性创建组件模板

import Vue from 'vue' const Item = Vue.component('Item', {  template: `<div>                <h3>子组件</h3>                <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  }})

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

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

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

数组内子节点是 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>        <h2>我是parent组件</h2>        <hr />        <User  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>        <h5>{{text}}</h5>        <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('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写法            }}

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写法            }}

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