一、组件

1.组件就是把复杂项目拆分成简单的组件，可以让团队开发更高效，组件更是我们是可以重复使用的模块。通俗的来说，组件其实就是个小的Vue，它也具有data，methods，watch，computed等！

2.创建一个组件

下面来看一个注册完整使用的组件吧！（看看你有没有创建成功哦！！！）

二、组件的传参

1.父传子
props
   <steper :value="5">
   steper内部
props:{value:{type:Number,default:1}}
   steper内部使用(只读，不能修改)
this.value

！！！常用值的类型

String Number Boolean Array Object Date Function Symbol

2.子传父

子传父
emit事件
在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值
父组件
<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num

下面让我们写一个简简单单的小案例用一个按钮来控制文字的消失与出现效果如图

用上面的开关按钮来控制哦！！！

下面附加源码图，小伙伴们看看谁做的好哦！！！！

三、动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

组件进入和离开 DOM 的钩子使用内置的 <transition> 组件

如：<button @click="flag=!flag">切换</button> <br>

</transition>

怎么样是不是和我们的css有些区别呢？但是也会有很多很多类似的地方哦！比如关键帧！！

好了看了这么多，小伙伴们都想跃跃欲试了吧！下面让我们写一个好玩的案例，用一个小按钮来控制小太阳的出现与消失吧！

这样的哦！！！

下面附加源码和图片哦！