1. render函数
(1)渲染Html
render: h=>('div', [
h('span', '111')
])
render: h => h('div', [
h('ul', {
on: {
'click': handleClick
}
}, [
h('li', {
on: {
'click': handleClick
}
})
])
])
(2)通过js代码渲染函数
let list = [{name: 'lison'}, {name: 'lili'}]
const getLiEleArr = (h) => {
return list.map((item, index) => h('li', {
on: {
'click': handleClick
},
key: `list_item_${index}`
}, item.name))
}
render: h => h('div', [
h('ul', {
on: {
'click': handleClick
}
}, getLiEleArr(h))
])
2. 函数式组件
render-page.vue(父组件) => list.vue(子组件) => render-dom.js
render-page.vue
<template>
<div>
<list :list="list" :render="renderFunc">
</list>
</div>
</template>
<script>
import List from '_c/list'
export default {
data () {
return {
list: [
{ number: 100 },
{ number: 45 }
]
}
},
components: {
List
},
methods: {
renderFunc (h, name) {
return h('i', {
style: {
color: 'pink'
}
}, name)
}
}
}
</script>
list.vue
<template>
<ul>
<li @mousemove="handleMove" v-for="(item, index) in list" :key="`item_${index}`">
<span v-if="!render">{{ item.number }}</span>
<render-dom v-else :render-func="render" :number="item.number"></render-dom>
</li>
</ul>
</template>
<script>
import RenderDom from '_c/render-dom'
export default {
name: 'List',
components: {
RenderDom
},
props: {
list: {
type: Array,
default: () => []
},
render: {
type: Function,
default: () => {}
}
},
methods: {
handleMove (event) {
event.preventDefault()
}
}
}
</script>
render-dom.js
export default {
functional: true,
props: {
number: Number,
renderFunc: Function
},
render: (h, ctx) => {
return ctx.props.renderFunc(h, ctx.props.number)
}
}
3. JSX
(1)普通写法
methods: {
renderFunc (h, name) {
return (
<i on-click={this.handleClick} style={{color: 'pink'}}>{name}</i>
)
},
handleClick (event) {
console.log(event)
}
}
(2)组件写法
import CountTo '_c/count-to'
methods: {
renderFunc (h, number) {
return (
<CountTo nativeOn-click={this.handleClick} on-on-animation-end={this.handleEnd} endVal={number} style={{color: 'pink'}}></CountTo>
)
},
handleClick (event) {
console.log(event)
},
handleEnd () {
console.log('end!')
}
}
4. 作用域插槽
render-page.vue: (父组件)
<count-to slot-scope="count" :end-val="count.number"></count-to>
list.vue: (子组件)
<slot :number="item.number"></slot>
<slot><slot>默认插槽: 在父组件两个标签中间写的东西都会在子组件中<slot></slot>插槽显示。