什么是组件:
答:什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;
组件创建三步骤
1.定义组件名名称
template:模板
2.注册组件
在实例化vue中注册组件,components:组件
3.使用组件
注册好组件之后在模板中直接写上组件名就可以使用组件了
组件当中非常重要的一个属性:props
父组件传递给子组件:
props:用来接收父组件传给子组件的数据,仅仅只能接收父组件传来的数据,却无法修改,props是单向绑定的,只能(父亲——>子)
注意* 父组件向子组件传递数据时,需要在父组件的组件上添加例如v-bind:visible="visible",这样的绑定事件,才能建立起父组件与props属性之间的联系
1.(父传子)
2.(子接收)
3.(子使用)
4.(子传父)
$emit:用于子组件调用父组件的方法并传递数据给父组件;子组件可以使用“$emit”触发父组件的自定义事件,触发事件后附加参数都会传给监听器回调,语法为“vm.$emit (事件, arg)
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
$event是固定写法,input事件的事件对象就是就是上面$emit的也就是左侧$emit的第二个参数this.count
5.(父监听)
组件插槽(slot)
在使用组件时可以在组件里面添加元素标签,这些元素标签会向子组件里面寻找带有<slot></slot>
的标签,并将父组件里面的这些元素追加到slot标签的位置里
具名插槽(不太重要)
需求:有时候,我们可能需要多个插槽,那么就可以给这些插槽添加个name
给插槽命名好之后就可以使用了
作用域插槽
所谓的作用域插槽,其实就是带参数(数据)的插槽,即在子组件的插槽中带入参数(数据)提供给父组件使用,该参数(数据)仅在插槽内有效,父组件可以根据子组件中传过来的插槽参数(数据)对展示内容进行定制。
1.在子组件中放置一个带参数(数据)的插槽:
2.在父组件中引用该子组件,并通过slot-scope来接受子组件的插槽中传过来的参数和使用该数据
这时候页面展示的内容就会是【作用域插槽:插槽中参数值是kk1】。
动画
vue写法
fade-enter-active:进入时的效果
fade-leave-active:出去时的效果
fade-enter:进入的那一刻动画效果
fade-leave:离开的那一刻动画效果
fade-enter-to:完全进入达到的效果
fade-leave-to:完全离开时达到的效果
css3写法:定义关键帧
动画的组件名为transition,可以引用css动画库