Vue驾校-从项目学Vue-3

前言：

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

代码实战2：

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

• 书接上回，UserProfile页面功能很复杂，所以我们拆分为3个功能组件：都放在components下
  

1. 用户动态页面的grid效果：

• 预设用户动态界面含有三大部分，我们可以使用BootStrap中的grid自定义空间划分：
  
• 查看grid的html代码，发现就是一个container类内嵌row类和col类，完全可以手写：
  
• 添加了grid效果之后，查看一下此时用户动态组件的网页效果：
  

2. 个人资料组件的grid效果：

• 先确定个人资料展示区域的样子：
  
• 有了目标样式之后，开始对UserProflieInfo.vue组件进行加工：
• 导入grid效果：
  

头像设置：

• 用文件管理器(vscode不支持直接复制粘贴)，向assets文件夹下粘贴一张图片作为头像：
  
• 为组件添加头像的图片标签：
  
• 将个人资料组件UserProfileInfo.vue导入UserProfileView.vue的页面主要组件：
  import + components + 标签化：
  
• 查看一下有头像的网页效果：发现图片太大了（注释结尾还漏删了个>）
  如果你看不到头像，先问问自己修改的代码保存了吗？再看看图片路径对不对
  
• 凡是前端样式问题，全去BootStrap找对应的美工代码：
  
• 为图片的img标签加上img-fluid的css类，就能实现响应式自适应大小：
  

文字设置：

• 关注按钮也去BootStrap找：
  
• 直接复制粘贴到UserProflieInfo.vue：
  
• 保存后到网页查看现在的个人资料区效果：
  

手动小改美工：

• 不能说是赏心悦目，但是也是中规中矩，再手动小改美工：
  
• 保存后看看网页样式：
  

3. 编辑发帖组件：

导入初始化组件：

• 创建好UserProfilePosts.vue组件，初始化后导入到UserProfileView.vue中：
  

组件间通信：

• 在UserProfile.vue中，我们将名称/粉丝/关注写为固定的“画面”了，
  但是现在要写编辑发帖，每次从UserProfileWrite写完帖子后要发送到历史博客UserProfilePosts中，这就涉及到了组件之间的通信

1. 通信的数据存储在哪：

• 现在两个组件之间交换数据，我们一般将子组件的数据存储在父组件中

  父组件是页面的主要组件，子组件是被父组件引入调用的组件

  这样存储是因为一个子组件中的信息一般要被同父组件的其他子组件使用

• 除数据外，子组件要使用的函数也被存储在了父组件中

2. 通信的数据是什么：

• 从本项目看，目前我们实现的UserProfileInfo中的个人信息，要实现UserProfileWrite中的编辑文章，都是要被很多组件共享的信息
• Vue提供setup(props, context)=>{}函数，将数据定义为一个对象或者单独一个变量来进行通信
  说到函数，当然是写在js的<\script>标签中的js
• setup中含有两种变量关键词，都需要import导入：
  1. ref：定义变量，通过.value属性重新赋值，运行效率稍低
  2. reactive：定义对象，不可重新赋值，且自动检测对象的变化
• 使用举例，在父组件中定义个人信息对象：
  

3. 如何进行数据通信：

• 父组件给子组件传递数据：

1. 父组件中给子组件标签加一个属性：（之后子组件依靠key的名称来获取值）

<子组件 v-bind:key名="setup中的return值"> 子组件>

也省略 v-bind，只留下:

<子组件 :key名="setup中的return值"> 子组件>

2. 子组件通过export default中的props属性来接受：

export default {
	props:{
		key: {
			type: Object,
			required: true
		}
	}
}

• 一图总结：
  

4. 如何使用通信获得的数据：

• {{对象.属性}}直接获取对象中某属性的值，或者{{变量名}}直接获取变量的值
  
• computed：动态计算数据
  使用前需要import导入，而且需要搭配setup(props){}函数使用：
  
• 查看一下现在的网页：中间确实多了个空格
  

5. 如何进行函数通信：

• 从下面的关注按钮与函数绑定来看函数通信：

个人资料的关注功能：

1. 子组件的v-if属性：

• 为button关注添加v-if属性，使得按钮内容在不同的user.is_followed下不同：
  

2. 子组件的@click属性：

• 现在还需要在UserprofileView.vue界面的setup()中对数据进行手动修改
  下面我们利用js函数来帮我们自动修改数据：
• 首先在子组件的setup()函数中定义好函数，之后使用v-on:click="函数名"可以为button绑定函数：
  
• 到前端网页查看函数是否绑定成功：
  

3. 父组件的@事件绑定：

• 当前子组件的函数只是简单的打印了一下数据，为什么不直接修改user.is_followed呢？
  因为真的数据存储在父组件的UserProfileView.vue中，真修改还需要去父组件调用函数
• 父组件向子组件传递函数，是通过绑定事件的方法实现的
  在父组件对应的子组件标签中使用@key=“函数名”
  
  函数在setup中定义而不return会报错：
  

4. 子组件的context.emit属性：

• 子组件调用父组件的函数：
  在子组件中的setup使用context.emit(key)可以调用父函数事件绑定好的函数
  
• 现在刷新后看看点击关注按钮的反应：
  

5. 进行函数通信总结：

• 首先在子组件的setup要声明函数，以及通过@click="函数名"为botton添加点击函数
• 其次在父组件的setup要实现函数，以及通过@key="函数名"为子组件标签进行事件绑定
• 最后在子组件对应函数中通过setup的context添加context.emit(key)，为函数声明添加函数实现

博客架构：

发布博客功能：

• 目前已经学会了父子组件的数据通信和函数通信，但是发布博客是从编辑文字的组件到历史博客的组件
• 下一讲将实现组件之间的数据通信，将用户动态这一主要的网页基本实现