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

Question

老师您好，我在学习第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)
}

Login.vue:

\\父组件里绑定事件
<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>

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

Answer 1

张轩 2021-08-18 09:16:13

同学你好 非常好的思路和扩展 非常感谢你写的这个内容 开阔了所有人的视野 我个人认为 这个方法比事件要稍微难理解一点 同时 能否把你的代码（git）补充到文章中 这样其他同学可以更好的了解这个方法。

• 昭阳a #1

  好像理解了，ValidateForm组件给App组件传递方法，然后把方法给ValidateInput组件，ValidateInput触发方法把函数validateInput传递给ValidateForm

• 春去_秋来 #2

  这样每个<validate-input都要加@form-item-mounted="onFormItemMounted"
  算不算缺点呢？

Answer 2

春去_秋来 2022-08-25 17:28:09

你好 可以分享个git地址吗？想看下你怎么写的