【vue】将页面拆分为index+组件

目标：我有一个index.vue，其中有一个添加/编辑弹窗，但现在index一个文件的太大了（单文件代码接近一千行），因此需要将页面中的弹框抽取出来，作为一个单独的组件（方便维护）

建议：在抽取组件之前，将原先单页面的index.vue复制一份，如果抽取时弄坏了还有的搞，不然麻烦大咯

1-抽取组件

在原本的页面中，弹框被一个el-dialog标签包裹，因此将这一部分代码直接裁剪出来，新建一个EditForm.vue文件并复制进去

• 在复制到新的vue文件中时，需要将页面使用一个template标签包裹起来

• 将弹框需要的数据结构复制进来

• 将弹框所需要的函数复制进来

小提一嘴：如果你细看上面的这个函数，所有的函数都用function修饰，并且还有一些我没贴出来，这些函数是写在vue的script中，但并没有使用 methods 关键字来包裹这些函数，这让我十分纳闷，能支持这样写的原因是，使用了vue3的setup语法糖，如果你想要具体了解这些，在下面我有贴setup语法糖的官网

现在有一个简单的组件了，要如何使用，

回顾一下vue2的时候，使用组件需要引入，声明，再使用

不过现在使用的是vue3，要如何使用组件？同时因为使用的组件是一个弹框，在父组件中，应该如何控制弹窗的显示和消失，如何向子组件传递数据（弹框作编辑功能时，需要传递title和id做数据回显）

这里我是看项目中有一个已经做好模块化的例子，照着这个例子来，

具体的摸索过程暂时按下不表，下面将整理好的步骤贴在下面

1 - 在子组件的script标签中，使用setup语法糖，

2 - 在父组件上，直接引入组件，使用就可以了，跳过了vue2中的声明部分

需要说明的是，按照官网的说法，使用组件时，直接使用你起的名字就可以（就像vue2中那样），但在项目中一直使用的是双单词+首字母大写，使用时是两个单词分开+首字母小写+中划线连接（-），这里说明一下，按理说直接使用也是可以，你可以自己试一试

setup相关知识：

vue3 setup语法糖，在script标签里加setup

vue3 setup官网介绍

2-定义数据

在父组件中，定义响应数据用于传递值

title - 不同的弹窗用途的title

id - 编辑弹窗需要用id来获取数据回显

isEditView - 用来控制弹窗显示的逻辑变量

ref括号中的值是默认值

子组件定义值

在子组件中，因为我们使用了setup挂载组件，所以我们需要使用特殊的方法来获取父组件的数据，使用的是defineProps这个函数，如果不清楚该函数，可以在前面介绍setup的帖子中看看

子组件使用定义的值

父组件绑定值

在父组件使用子组件时，需要绑定所有的值，否则该值将不会传递给子组件，请注意这个问题

ref相关知识：

vue3-ref和reactive_坏萝卜的博客-CSDN博客_vue3 ref

3-操作子组件

子组件的操作具体要考虑业务来看，目前写的是编辑/添加窗口，考虑的操作是，

• 开启/关闭弹窗

• 传递title或id

新增开启弹窗

reset()是一个清空from数据的函数

编辑开启弹窗

在开启之后的弹窗如何关闭？

关闭时，都需要子组件来改变自身状态

这里也是先通过别的组件例子来学习，之后再慢慢总结，摸索过程按下不表，下面直接上步骤

1 - 书写修改标志变量的函数

注意！实在父组件中书写！

2 - 组件绑定函数

稍微说一下，@后面的名字可以随便写，而这个名字后面对应的就是你写的函数

handleCloseAddView - 用于关闭弹窗的函数，通过改变标志变量来实现

getList - 获取表单数据（刷新）

3 - 子组件使用函数

因为用的是setup语法糖，所以使用defineEmits来声明事件，可以看到这里声明的事件名，就是在父组件中绑定函数时，写的事件名

之后在子组件的函数中，去使用绑定函数，如点击取消按钮，确定按钮，可以关闭弹窗

这里的使用方法是一个格式，照着写就行了，emit就是你上面声明时定义的变量

这里的调用逻辑为：

父组件函数（handleCloseAddview）->绑定到子组件上（@closeViewDalog）->通过defineEmits声明事件（定义变量）->使用函数来操作状态（变量名("子组件绑定名")）

绕了一个圈

到此为止，抽取组件的步骤已全部完成，希望能帮到你

后言

我现在有点健忘，或者恍惚，有时走在路上会突然停下来，看着眼前的风景脑子转起来，我在哪，我要去干什么，之后关于现在的各种信息浮现，有时会微微惊叹，我居然已经站在了这里