vue框架render方法如何替换template
时间：2022-06-29 09:21:57 | 栏目：vue | 点击：次
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>
); */
}
}