[讨论]第5章ValidateForm不使用mitt的方案

来源：5-9 ValidateForm 编码第二部分 - 尝试父子通讯

slpwlkr

2021-08-18

老师您好，我在学习第5章ValidateForm部分时，找到了一种不使用mitt库也能实现slot内节点与被插入组件沟通的方法，用到了Vue3的特性：作用域插槽
这里有一篇文章讲解了具体实现

我在项目里使用上面的方法实现了相同的功能，希望和老师分享一下~
ValidateInput.vue:

\\发出事件到父组件
onMounted(() => {
  context.emit('form-item-mounted', validateInput)
})

ValidateForm.vue:

\\模板里用插槽属性暴露handler
<slot name="default" :onFormItemMounted="onFormItemMounted"></slot>
\\加入验证函数
const onFormItemMounted = (func: ValidateFunc) => {
  validateFuncs.push(func)
}

\\父组件里绑定事件
<template #default="{ onFormItemMounted }">
  <div class="mb-3">
  <label class="form-label">Email address</label>
  <validate-input :rules="emailRules" v-model="emailValue" @form-item-mounted="onFormItemMounted"
    type="email" placeholder="输入邮箱"></validate-input>
  </div>
</template>

由于慕课没有讨论区，故发到提问区，请老师见谅~

写回答

2回答