初识vue组件

什么是组件：

         答：什么是组件： 组件的出现，就是为了拆分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动画库