组件间的传值
下面通过项目进行演示：（element-ui 目前比较成熟的是基于Vue2的版本）
创建一个Vue2的项目，项目名为：component-demo
具体创建过程参照上节课程。注意本项目选Vue2.x 版本
项目创建完成后，将 component-demo 文件夹拖入
Vue2 和 Vue3 对于初学者来说只是区别在语法上有些区别
main.js 中的主要区别:
1.创建Vue对象：Vue3用createApp ; Vue2用 new Vue
2. Vue3用mount ； Vue2用 $mount
3.导入App组件，Vue2用 render 函数去渲染的App组件；Vue3 直接把App组件传递到了 createApp 里面。
最终都是把 App 组件渲染到 public\index.html 文件 <div id="app"></div> 中 。
为更好的体现，清理一下程序。
1、删除 HelloWorld.vue
2.删除App.vue 组件里面下图框选的部分
在 components 目录下新建一个 Mocie.vue 组件，输入如下代码。
注意：
Vue2里面所有的组件必须包含在一个父标签下<div> </div> 。Vue3没有这个限制。
在根组件 App.vue 中完成导入、注册和调用
运行 npm rum serve 启动服务，
在浏览中就可以显示效果
上面的自定义组件设置了一个固定的标签，显示 “爱情天空”这几个字符。下面演示动态标签。
修改自定义 Movie.vue 标签的内容，如下：
<script> 标签内 export 表示输出；name 可以任意取，这里定义为Hello 。 data 是数据，函数里面返回的是 title 。
将<template>标签中固定的“爱情天空”替换为 {{title}} ，这时浏览器自动变化，显示如下图：
注意：电影组件是需要重用的，如果在这里固定写了标题的内容，假如有10部电影，不可能去创建10个组价。显然组件里面的数据不应该有它本身提供，而是应该有外界的使用者来提供。应该是谁调用Movie组件谁就提供数据。具体操作：
在 Movie.vue 组件中修改代码如下：
然后在组件App.vue 中的 Movie 就有了 title 属性，设置该属性的值，就可以在浏览器中显示出来
可以继续增加 自定义组件的属性，例如增加一个评分属性 rating
添加 rating 属性后在根组件 App.vue 中就可以调用。
然后将 输入的评分传递回 Movie.vue 中的<span>{{rating}}</span> 中，在浏览器显示出来。
如果有很多电影，可以在根组件 App.vue 中描述这个数据，使用 data 方法，后面会讲到数据从网络请求传递过来，目前先模拟一下，自行设置一些数据一个的movies 电影列表，里面有一些电影（包括：id、标题title、和评分rating三个属性）
data:function(){
return{
movies:[
{id:1,title:"阿凡达",rating:9.2},
{id:2,title:"爱情公寓",rating:8.7},
{id:3,title:"金刚狼",rating:8.9},
]
}
},现在需要根据有多少部电影就生成多少个Movie组件，使用列表渲染 v-for ,这里定义一个变量 movie d对应 movies 电影列表，还必须需要设置 key，绑定唯一的属性 ,这里通过movie.id 取出列表唯一id。然后再绑定 title 和 rating（绑定属性需要加 ： 号，比如这里的 :key :title :rating ）
自定义的Movie.vue可以加样式和各种标签，以后来数据的时候网页的列表就自动生成了。
组件里面有可以有自己的行为，比如加一个按钮：
定义按钮后弹出一个模拟“收藏成功”的对话框
组件间的传值
在 components 目录下新建一个Hello.vue 组件
在App.vue 中导入Hello.vue 组件,注册，调用
现在 Movie 和 Hello 两个组件都在<div></div>中调用，是兄弟组件，无法共享数据，无法像通过Movie.vue里面的 props 那样来传递。
就是现在只能将 movies 里面的数据交给 Hello，而无法将Movie 里面的数据交给 Hello
要实现相互数据传递需要借助其它方法，后面再具体演示。
element-ui 介绍
（现在许多框架对Vue3 的支持还在迭代中，还是以Vue2来演示）
停止系统运行，然后再终端输入 npm i element-ui -S
第三方的组件的源码都会安装在 node_modules 目录里面
还会在package.json 中记录
注意：从网上下载的许多系统的源码没有 node_modules 目录，但只要 package.json 中的记录是完整的就可以通过 npm install 自动下载缺失的依赖。
从官网的快手上手，可以看详细是使用方法
https://element.eleme.cn/#/zh-CN/component/quickstart
要使用也需要先在 main.js 中导入，然后进行注册。
（注意：前面我们在App.vue中注册的 Movie 和 Hello 组件是局部注册，第三方组件一般需要在main.js 中进行全局注册）
下面演示具体使用案例：
在官方网页中选择 Table 表格中的基础表格进行演示（其它组件使用方法类似），点击显示代码，
将里面的代码复制到我们自定义的 Hello.vue 组件中
这时表格就在网页中显示出来了。
<srcipt>标签内的data() 中 tableData 数据绑定给了 <template> 标签中的 :data="tableData"
每一列的prop 都和 <srcipt> 标签内 tableData 中的属性对应。例如 prop="date",在下面也有对应的 date 属性；prop="name",在下面也有对应的 name 属性;prop="address",在下面也有对应的 address属性.
label=“日期”，这里的 label 是表头显示内容;
width=“180”，指单元格宽度180
在官方网站上有 Table Attributes 详细说明
再来演示一个事件组件，找到下图的组件，复制代码
显示效果如下：
第三方图标库
- 文档地址： https://fontawesome.dashgame.com/
- 安装：npm install font-awesome
安装前需要停车程序运行 Ctrl + C，安装完成后再次启动程序 npm run serve
使用：在main.js 中导入 import 'font-awesome/css/font-awesome.min.css'
在官方网站中找到你想要使用的图标（如小图中小相机），复制代码
放到需要方式的标签中