vue render 使用

父组件：

<template>
    <div class="p-home">
        <p v-for="(item,i) in c" :key="i">{{ i }}:{{ item }}</p>
        <childone>
          壹号按钮
        </childone>
        <!-- 添加点击事件 -->
        <childtwo @click="handleClick">二号按钮</childtwo>
        <hTitle :id="item" v-for="item of [1,2,3]" :key="item"></hTitle>
    </div>
</template>
<script>
import childone from "./childone.js";
import childtwo from "./childtwo.js";
import hTitle from "./h-title.js";
export default {
    name: 'home',
    components:{
        childone,childtwo,hTitle
    },
    methods: {
        handleClick() {
          alert('你点击了二号按钮')
        }
    }
};
</script>

子组件：

// 函数式组件 1  childone.js
export default {
    name: 'childone',
    functional: true,
    render(h, context) {
        return h('button', '按钮')
    }
}

// 函数式组件 2 childtwo.js  接收子集 children
export default {
    name: 'childtwo',
    functional: true,
    render(h, { props, listeners, children }) {
        return h('button',{
            attrs:props,
            on:{
                click: listeners.click
            }
        },children)
    }
}

//h-title
export default{
    name:'h-title',
    data(){
        return {
            txtlists:['一','二','三']
        }
    },
    props:{
        id:{type:Number,default:1}
    },
    render(){
        //jsx语法
        const htxt = `<h${this.id}>标题${this.txtlists[this.id - 1]}</h${this.id}>`
        return <div domPropsInnerHTML={htxt}></div>
    }
}