本文所講的都是在自定義組件中使用render函數(shù)的栗子，更多內容請查看官網(wǎng)或者（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函數(shù)并沒有與v-model對應典蝌，你必須自己實現(xiàn)邏輯距潘，這就是深入底層的代價，但是和v-model相比业稼，這可以讓你更好的控制交互細節(jié)
<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>
