vue框架render方法如何替換template

更新時(shí)間：2022年04月12日 09:26:15 作者：普通網(wǎng)友

這篇文章主要介紹了vue框架render方法如何替換template，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

render方法替換template

使用template屬性創(chuàng)建組件模板

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創(chuàng)建換成使用render方法創(chuàng)建

const app = new Vue({
? el: '#app',
? data: {
? ? count: 0
? },
? render (createElement) {
? ? return createElement(
? ? ? 'div', {
? ? ? ? ref: 'myDiv',
? ? ? ? // domProps: {
? ? ? ? // ? ?innerHTML: '<span>注意：添加該屬性會(huì)把后面的子節(jié)點(diǎn)覆蓋</span>'
? ? ? ? // },
? ? ? ? attrs: {
? ? ? ? ? ? id: 'test-id',
? ? ? ? ? ? title: 'test-title' ?
? ? ? ? }
? ? ? },
? ? ? [
? ? ? ? createElement('item', {
? ? ? ? ? ref: 'item'
? ? ? ? },
? ? ? ? [
? ? ? ? ? createElement('p', {
? ? ? ? ? ? ref: 'p'
? ? ? ? ? }, 'this is a slot')
? ? ? ? ])
? ? ? ])
? },
? components: {
? ? Item
? }
})

1.如上面更改后的代碼，render方法內(nèi)傳入createElement函數(shù),接下來使用createElement函數(shù)來創(chuàng)建節(jié)點(diǎn)。

2.函數(shù)方法格式 createElement('節(jié)點(diǎn)或組件名稱'， {節(jié)點(diǎn)屬性}, [子節(jié)點(diǎn)])

3.先創(chuàng)建一個(gè)div元素, 內(nèi)部包含ref='myDiv'的屬性, 使用數(shù)組存放其子節(jié)點(diǎn)

4.數(shù)組內(nèi)子節(jié)點(diǎn)是 item組件, 屬性是 ref="item", 其子節(jié)點(diǎn)為p，依次類推逐層創(chuàng)建子節(jié)點(diǎn), 最后的文本節(jié)點(diǎn)使用字符串或變量即可，無需再用[]包含。

template和render用法對(duì)比

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>這是填充默認(rèn)slot數(shù)據(jù)</p>
? ? ? ? ? ? <template v-slot:footer>
? ? ? ? ? ? ? ? <p>這是名字為footer的slot</p>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-slot:item="props">
? ? ? ? ? ? ? ? <p>名字為item的作用域插槽。顯示數(shù)據(jù){{props}}</p>
? ? ? ? ? ? </template>
? ? ? ? ? ? <template v-slot:list="props">
? ? ? ? ? ? ? ? <p>名字為list的作用域插槽。顯示數(shù)據(jù){{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>默認(rèn)的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: '前端、后端、設(shè)計(jì)、產(chǎn)品'
? ? ? ? ? ? },
? ? ? ? ? ? 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的作用域插槽。顯示數(shù)據(jù)${JSON.stringify(props)}`),
? ? ? ? ? ? ? ? ? ? list: props => h('p', `名字為list的作用域插槽。顯示數(shù)據(jù)${JSON.stringify(props)}`)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },?
? ? ? ? ? ? // 非作用域插槽寫數(shù)組里
? ? ? ? ? ? [
? ? ? ? ? ? ? ? h('p', {slot: 'header'}, '這是名字為header的slot'),
? ? ? ? ? ? ? ? h('p', '這是填充默認(rèn)slot數(shù)據(jù)'),
? ? ? ? ? ? ? ? h('p', {slot: 'footer'}, '這是名字為footer的slot'),
? ? ? ? ? ? ])
? ? ? ? ]);
? ? ? ? // jxs寫法
? ? ? ? /* return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h1>我是parent組件</h1>
? ? ? ? ? ? ? ? <hr />
? ? ? ? ? ? ? ? <User?
? ? ? ? ? ? ? ? ? ? style="background: #ccc"?
? ? ? ? ? ? ? ? ? ? text="我是傳入的文本"?
? ? ? ? ? ? ? ? ? ? scopedSlots={
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? item: props => (<p>名字為item的作用域插槽。顯示數(shù)據(jù){JSON.stringify(props)}</p>),
? ? ? ? ? ? ? ? ? ? ? ? ? ? list: props => (<p>名字為list的作用域插槽。顯示數(shù)據(jù){JSON.stringify(props)}</p>),
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <p slot="header">這是名字為header的slot</p>
? ? ? ? ? ? ? ? ? ? <p>這是填充默認(rèn)slot數(shù)據(jù)</p>
? ? ? ? ? ? ? ? ? ? <p slot="footer">這是名字為footer的slot</p>
? ? ? ? ? ? ? ? </User>
? ? ? ? ? ? </div>
? ? ? ? ); */
? ? }
}

User.js (render寫法)

export default {
? ? props: {
? ? ? ? text: String
? ? },
? ? data () {
? ? ? ? return {
? ? ? ? ? ? item: {
? ? ? ? ? ? ? ? name: '張三',
? ? ? ? ? ? ? ? age: 28,
? ? ? ? ? ? ? ? works: '前端、后端、設(shè)計(jì)、產(chǎn)品'
? ? ? ? ? ? },
? ? ? ? ? ? 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>
? ? ? ? ); */
? ? }
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: