render函数里运用 vue 自定义component 组件

记录在render函数里写自定义组件传值遇到的问题,内容不完整,只提供思路

1, 全局注册main.ts

import childComp from '../src/pages/childComp.vue'
Vue.component('childComp', childComp)

2, 父页面data和render函数

• 模拟获取的数据,数据内容根据需要自行填写

<script>
    export default {
      name: 'Name',
      components: {
      },
      data() {
        return {
            groups: [{
                component: 'cube-input', // 标签名,任意
                label: '姓名',
                placeholder: '请输入',
                rule: { required: false } // 也可以写规则
            }, {
                component: 'cube-select', // 标签名
                label: '性别',
                placeholder: '请选择',
                options: ['男', '女'], // 下拉选项
                multiple: false // 是否多选
            }, {
                component: 'cube-select', // 标签名
                label: '喜欢',
                placeholder: '请选择',
                options: ['JS', 'Vue', 'Html'], // 下拉选项
                multiple: true // 是否多选
            }]
        }
     }
</script>

• render函数返回值,引用组件写法

render: (h, params) => {
    return h('childComp', { // 引入标签
        props: { // props childComp
            value1: value1, // 可自行定义需要传给子组件的值
            props1: this.groups, // 可自行定义需要传给子组件的值
        }
    })
}

3,子组件获取数据

• 子组件接收传来的值props1,value1

<component :is="props1.component" // is:渲染所需标签
    v-model="value1"
    :placeholder="props1.placeholder"
    :type="props1.type"
    :options="props1.options"
	:multiple="props1.multiple"
  >
  </component>

备注

• 本文为原创,如需转载请注明出处: render函数里运用 vue 自定义component 组件
• 如有问题,欢迎指正