Vue驾校-从项目学Vue-4

前言：
代码实战3：
- 1. 用户动态页面的功能组件：
- - 1. 历史博客组件的v-for功能：
  - - 父组件中定义数据对象：
    - 子组件中接受数据对象：
    - 子组件中使用数据对象：
  - 2. 编辑发帖组件：
  - - 为编辑区添加效果：
    - 获取编辑区的内容：
    - 为发布按钮添加函数：
  - 3. 总结数据&函数的组件传输方式：
  - - 函数传输方式：
    - 数据传输方式：
    - - 从父组件到子组件：
      - 从子组件到父组件：
      - reactive类型数据：
博客架构：

前言：

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

代码实战3：

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

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

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

父组件中定义数据对象：

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

子组件中接受数据对象：

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

子组件中使用数据对象：

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

2. 编辑发帖组件：

为编辑区添加效果：

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

获取编辑区的内容：

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

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

为发布按钮添加函数：

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

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

点击按钮查看此时函数是否和button绑定了：

2.父组件实现带参的函数，通过#key="函数名"为子组件传递函数：
通过函数的参数，接受子组件传递来的数据：

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

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

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

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

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

函数传输方式：

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

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

数据传输方式：

从父组件到子组件：

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

从子组件到父组件：

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

reactive类型数据：

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

博客架构：

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

Vue驾校-从项目学Vue-4相关推荐

什么是Vue？为什么要学Vue？
什么是Vue?为什么要学Vue? 官方解释只有一句话:Vue是一套用于构建用户界面的渐进式JavaScript框架,有易用.灵活.高效的特点. 小白听了这句话肯定有点蒙圈,因为虽然只有一句话,但其实背 ...
vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable
该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install ...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
Vue全家桶-项目实战笔记
写在前面这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记,主要记录思路,内容不完整,这里只写到了用户列表管理,进来的友友们可以根据目录,看是否有自己需要的功能这篇笔记记录的是基础vue ...
patch是什么意思啊_学 Vue 看这个就够了 - 什么是 Vue.js
# 前言作为还在漫漫前端学习路上的一位自学者.我以学习分享的方式来整理自己对于知识的理解,同时也希望能够给大家作为一份参考.希望能够和大家共同进步,如有任何纰漏的话,希望大家多多指正.感谢万分! 在 ...
Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
学java要学vue吗_学vue之前必看
Vue学习 1.1 vue.js是什么? Vue是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于 ...
vue process.env获取不到_从文档开始,重学vue(下)源码级别
此篇文章主要是从应用及源码层面讲解vue部分常用api,阅读起来可能略有难度,新手可以看<从文档开始,重学vue(上)> 示例代码均在vue-cli3中完成 Vue.extend() 可以 ...
新手学vue还是react？
新手学vue还是react?下面本篇文章给大家分析一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出身背景: react是facebook团队开发,2013.3月发布.目前版本 ...

Vue驾校-从项目学Vue-4

Vue驾校-从项目学Vue-4

前言：

代码实战3：

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

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

父组件中定义数据对象：

子组件中接受数据对象：

子组件中使用数据对象：

2. 编辑发帖组件：

为编辑区添加效果：

获取编辑区的内容：

为发布按钮添加函数：

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

函数传输方式：

数据传输方式：

从父组件到子组件：

从子组件到父组件：

reactive类型数据：

博客架构：

Vue驾校-从项目学Vue-4相关推荐

最新文章

热门文章