本文所讲的都是在自定义组件中使用render函数的栗子，更多内容请查看官网或者（https://segmentfault.com/a/1190000010913794?utm_source=tag-newest）
首先在根组件引用实例组件（使用vue-cl3的vue serve 启动服务，点击详情）
image.png
1. 简单的渲染一个元素
image.png
<script>
export default {
render: function(createElement) {
return createElement(
'div', {
class: {
child: true,
more: false
},
attrs: {
id: 'foo',
name: 'child'
},
style: {
width: '100%',
height: '50px'
},
domProps: {
innerHTML: 'child-innerHTML'
}
},
)
}
}
</script>
<style scoped>
.child {
background: pink
}
.more {
background: red
}
</style>
2. 添加子标签
image.png
<script>
export default {
render: function(createElement) {
return createElement(
'div', {
class: 'child',
style: {
width: '100%'
},
}, [
createElement('h1', '标题'),
createElement('h2', {
attrs: {
id: 'child-h2'
},
class: 'more',
style: {
width: '100%',
height: '50px'
},
domProps: {
innerHTML: 'h2'
}
}),
]
)
}
}
</script>
<style scoped>
.child {
background: pink
}
.more {
background: red
}
</style>
3. this.$slots的用法
image.png
// 根组件
<template>
<div>
<child>
<h1 slot="childheader">childheader</h1>
<h2 slot="childbody">childbody</h2>
<h3 slot="childfooter">childfooter</h3>
</child>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child
}
}
</script>
// 子组件
<script>
export default {
render: function(createElement) {
let childheader = this.$slots.childheader,
childbody = this.$slots.childbody,
childfooter = this.$slots.childfooter;
return createElement(
'div', {
class: 'child',
style: {
width: '100%'
},
}, [
createElement('div', childheader),
createElement('div', childbody),
createElement('div', childfooter),
]
)
}
}
</script>
<style scoped>
.child {
background: pink
}
.more {
background: red
}
</style>
4. v-model
image.png
首先需要知道的是，render函数并没有与v-model对应，你必须自己实现逻辑，这就是深入底层的代价，但是和v-model相比，这可以让你更好的控制交互细节
<script>
export default {
render: function(createElement) {
let self = this
return createElement(
'div', [
createElement('div', self.childinput),
createElement('input', {
domProps: {
value: self.childinput
},
on: {
input: function (event) {
self.childinput = event.target.value
}
}
})
]
)
},
data() {
return {
childinput: 'childinput'
}
},
watch: {
childinput(v) {
console.log(v)
}
}
}
</script>
<style scoped>
.child {
background: pink
}
.more {
background: red
}
</style>
5. 作用域插槽
image.png
这里需要使用的是this.$scopedSlots
// 跟组件
<template>
<div>
<child>
<template slot-scope="scoped">
{{scoped.text}}
</template>
</child>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: {
child,
}
}
</script>
// 子组件
<script>
export default {
render: function(createElement) {
let self = this
return createElement(
'div', {
style: {
width: '100%',
height: '50px'
},
class: 'child'
}, [
self.$scopedSlots.default({
text: this.childmsg
})
]
)
},
data() {
return {
childmsg: 'childmsg'
}
}
}
</script>
<style scoped>
.child {
background: pink
}
.more {
background: red
}
</style>
