前言

哈喽大家周五好，马上又是一个周末了，下周就是中秋了，下下周就是国庆啦，这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了，好几次都坚持不下去想要中断，不过每当看到群里的交流，看到博客下边好多小伙伴提出问题，我又燃起了斗志，不过这两天感冒了，所以更新的比较晚，这里也提醒大家，节日要照顾好自己哟~~~，好多人说我写的上不了台面，哈哈这里表示赞同，本系列的宗旨就是，给大家一个学习的点，让大家去自学一个面，然后大家一起学，把面交流成一个立体，就达到一个体系了。好啦，言归正传（一直告诫自己，不能写心情贴，哈哈要写技术文章），昨天呢，不知道有几个小伙伴按照教程把自己的之前的 .net core api 教程里的项目给展示出来了呢，一定要自己动手试试哟，只要成功了，就是棒棒哒，今天咱们继续往下走，来说说一个一直让人头大的东西，就是表单以及 Vuex的使用，好啦，开始今天的讲解！

零、今天要完成实战1中的红色部分

一、常见的 Vue 表单提交是如何设计的？

说到了 Web开发，一定几乎所有人都能说到表单提交，这个是真的少不了，而且也让人写的头晕眼花，心身疲惫，自然在 Vue 开发中，也是少不了的一部分工作，常见的表单是什么样子的呢？

1、表单、按钮等在一个组件内

这个时候机智如你一定会说：这有什么难的是吧，Vue 提供了完美的 双向数据绑定，可以很好的实现数据的更新、获取和提交，嗯~没错，你说的很对，我们再也不用费心的操作 DOM 了，用户填好数据就可以直接 axios 到 后端api接口了，多好，当然，这也是一个处理方式。

这里的代码就不写了，很简单，把所有的写到一个页面内就行，大家可以自己试一试。

可是想一想，如果页面内有很多组件，有很多的表单，或者更直接点儿，想要表单单独是一个组件用作弹窗，你会怎么办呢~为什么呢？

2、按钮在父组件、表单在单独的子组件内

这种开发利于开发，易于维护，可是就是不适合数据传输，因为父子组件内的数据通讯是很麻烦的，虽然 Vue 支持双向数据绑定，但是父子通讯是：组件之间的数据只能是单项流通的，而且由父组件传递给子组件，如果你看过我之前写的文章，有关组件的《