Vue驾校-从项目学Vue-4

前言：

往期Vue框架内容：Vue驾校-从项目学Vue-1
算法系列博客友链：神机百炼
强烈推荐Y总所有课程：小白友好的程序教学社区

代码实战3：

1. 用户动态页面的功能组件：

1. 历史博客组件的v-for功能：

• 通过历史博客组件的编写，再熟悉一下父子组件数据/函数通信：

父组件中定义数据对象：

1. 在setup()函数中定义好博客列表对象：
   
2. 在setup()的return中返回定义好的对象：
   
3. 在对应子组件的标签中加上:key=“上述return的对象key”
   

子组件中接受数据对象：

• 直接props中声明类型 + 固定retuired即可：
  

子组件中使用数据对象：

• 我们直接使用{{}}来获取数据对象的值，前端效果：
  
• 下面介绍Vue自带的v-for功能组件：
  :key可以使用数组下标index关键词，但是不便删除数据时:key不变
  
• 现在再加一条博客，来看看网页什么样子：
  
• 历史博客的数据存储和前端查看已经完成了，下面我们来实现编辑博客，达到发表一篇博客后，历史博客列表就新加一条刚写的博客

2. 编辑发帖组件：

为编辑区添加效果：

• 到BootStrap找到好看的textarea样式：
  
• 改动好子组件后加入到父组件中，查看此时的前端网页效果：
  

获取编辑区的内容：

1. 在UserProfileWrite.vue的setup()函数中准备好接受编辑内容的变量：
   
2. 为<\textarea>标签加v-model = “变量”，来将编辑内容接受到变量中：
   
3. 用一个标签看看是否成功将编辑内容存储到变量当中：
   

• 顺便一提，我们不会做传图片功能，因为传图片属于后端内容
  而且一般不自己写传图片功能，都是直接使用大厂给的图床云盘接口
  因为图片中可能含有脚本代码，可能是恶意攻击

为发布按钮添加函数：

• 发布按钮要实现将Write子组件的content.val内容返回给父组件，顺便清空编辑区已经发布的内容

1. 子组件声明函数 & 为按钮@click关联函数：
   

• 点击按钮查看此时函数是否和button绑定了：
  
  2.父组件实现带参的函数，通过#key="函数名"为子组件传递函数：
  通过函数的参数，接受子组件传递来的数据：
  

3. 子组件接受父组件传递的函数，将当前编辑区内容通过参数传递给父组件：

context.emit('父组件事件绑定的key',content.value);
//千万别TM用vscode的自动import的process的emit，也不要用其他vscode自动补全的库
//context是setup(context,props)而来的

4. 将父组件中修改的posts传递给UserProfilePosts：

• 这一步不需要我们实现，posts对象的数据类型是reactive的，具有一处修改，各处同步的功能
• 点击网页的button看看是不是有置顶添加的效果：
  

3. 总结数据&函数的组件传输方式：

函数传输方式：

• 函数传输比数据传输简单，都是子组件声明，父组件实现，子组件调用父组件：

1. 子组件的setup()中声明一个函数，通过@click为button绑定
2. 父组件的setup()中实现一个函数，必要时携带参数，通过@key:"函数名"来实现事件绑定
3. 子组件通过setup(context)的context,emit(‘父组件绑定的key’)来调用父组件的函数

数据传输方式：

从父组件到子组件：

1. 在父组件的setup()函数中定义好对象，
   return便于直接在父组件使用
   为子组件标签添加:key="对象名"属性
2. 在子组件的setup()函数中添加props参数
   写好key:{数据类型, required:true}
   return key便于直接在子组件中使用

从子组件到父组件：

1. 子组件中setup()声明函数，为button绑定函数
2. 父组件中实现函数func(参数)，为子组件标签添加@key="func名"的事件绑定
3. 子组件中声明的函数内部以context.emit(“父组件绑定的key”,要给父组件传递的数据);，来调用函数同时传递给参数数据

reactive类型数据：

• 由于父组件中定义了所有数据对象，对于reactive类型的数据可以实现自适应：
• reactive对象一旦发送改变，所有引用该数据的地方随之发生改变
• 可以将reactive的自适应改变也视为是父组件对子组件的通信

博客架构：

• 目前的博客主要功能的用户动态页面已经实现，接下来还有注册登录 好友列表三个附属功能，进度已经完成一半了。
• 这一篇属于是系列最短的了，主要是熟悉数据和函数在父子进程之间的通信