题目描述
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 ])
}
你期待的结果是什么?实际看到的错误信息又是什么?
###又看见你了哈哈,
不知道你是内部调用还是外部父组件调用,其实都差不多, 下面这个是 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])
}
}
},