vue函数式组件

祖父组件 render-page.vue

<template>

<div>

<list :list="list" :render="renderFunc"></list>

</div>

</template>

<script>

import List from '_c/ulList'

export default {

data() {

return {

list: [

{name: 'zhou'},

{name: 'hui'}

]

}

},

components: {

List

},

methods: {

renderFunc(h, name) {

return h('i', {

style: {

color: 'red'}

}, name)

}

}

}

</script>

父组件 ulList.vue

<template>

<div>

<ul>

<li v-for="(item, index) in list" :key="`item_${index}`">

<span v-if="!render">

{{item.name}}

</span>

<render-dom v-else :render-func="render" :name="item.name"></render-dom>

</li>

</ul>

</div>

</template>

<script>

import RenderDom from '_c/render-dom'

export default {

name: 'list',

components: {

RenderDom

},

props: {

list: {

type: Array,

default: () => []

},

render: {

type: Function,

default: () => {}

}

}

}

</script>

子组件 render-dom.js ，即函数式组件

export default {

functional: true,

props: {

name: String,

renderFunc: Function

},

render: (h, ctx) => {

return ctx.props.renderFunc(h, ctx.props.name)

}

}