Vue2函数式编程中如何调子组件方法

Question

题目描述

Vue2函数式编程中如何调子组件方法

题目来源及自己的思路

在函数中编程中，render函数生成了一个组件，需要在响应事件中调用这个组件的一个方法，如代码

相关代码

render(h, c){
  const Btn = h('el-button', {
    on: {
       click: () => {
          // 这里怎么调用el-form的validate方法
       }
    }
  }, '提交')
  // el-form 本身有个方法叫 validate, 
  // 通常用this.$refs.form.validate调用
  const vNode = h('el-form', { ... }, [ ..., Btn ])
  
}

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

又看见你了哈哈，
不知道你是内部调用还是外部父组件调用，其实都差不多， 下面这个是 render组件调用的

<template>
  <div>
    <my-form :form="form"></my-form>
  </div>
</template>
    
  //... 
  data() {
    return {
      form: {
        username: 'admin'
      }
    }
  },
  components: {
    MyForm: {
      functional: true,
      props: {
        form: {
          type: Object,
          default: function() {
            return {
              username: 'admin'
            }
          }
        }
      },
      render(h, context) {
        const input = h('el-form-item', {
          props: {
            label: '用户名',
            prop: 'username'
          }
        }, [h('el-input', {
          props: {
            value: context.props.form.username
          },
          on: {
            input(value) {
              context.props.form.username = value
            }
          }
        })])
        const Btn = h('el-button', {
          on: {
            click: () => {
              // 这里怎么调用el-form的validate方法
              const refForm = context.parent.$refs.form
              refForm.validate((valid, ret) => {
                console.log(valid, ret)
                if (valid) return
                setTimeout(() => {
                  refForm.clearValidate()
                }, 1000)
              })
              console.log(this, context)
            }
          }
        }, '提交')
        // el-form 本身有个方法叫 validate,
        // 通常用this.$refs.form.validate调用
        return h('el-form', {
          ref: 'form',
          props: {
            model: context.props.form,
            rules: {
              username: {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              }
            }
          }
        }, [input, Btn])
      }
    }
  },