一、组件
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 name="fade">
<img src="./images/sun.jpeg" alt="" width="120" v-if="flag">
</transition>
怎么样是不是和我们的css有些区别呢?但是也会有很多很多类似的地方哦!比如关键帧!!
好了看了这么多,小伙伴们都想跃跃欲试了吧!下面让我们写一个好玩的案例,用一个小按钮来控制小太阳的出现与消失吧!
这样的哦!!!
下面附加源码和图片哦!