Vue-------学习笔记（三）组件，组件切换，动画

一、组件

一、组件的创建：

一、全局组件的3种创建语法：实际中不怎么用全局组件
1.方法一：用vue.extend 创建组件

注意：

2.方法2:
注意这个方法书写简单，但是在中只能写一个根元素

3.方法三， 这种方式相对较好

---

二、定义私有组件：就是在 new vue{ 这 }里面创建的，只能在#app2 的范围内使用

二、组件中的 data：

1，实例中能有方法，组件中也能有data 和 method
不同点：①组件中的dete为 function（），②内部return 出一个对象

2、为啥组件的date要为function ?

三、组件切换：

1、组件切换 方法1 ， 使用v-if ，v-else ，flag ---------只能在2个之间切换

2、组件切换方式 2， 用 : is属性
写好两个组件，①login 与 ②register -----------------------可实现多个之间的切换


呈现结果：实现点击切换

四、应用切换动画，多个组件的过渡

-------------------------------------------------分割线--------------------------------------------------

一、Vue 组件

1、什么是组件：封装了逻辑 视图 样式 ，可以复用的实例，且带有一个名字

2、如何定义组件：

• 全局组件：定义好的组件，可以在任何组件或实例中使用（实际开发中很少定义）

• vue 组件是一个特殊的vue构造函数，再定义组件时，原来在实例当中能够传递的属性在组件中都可 适用，除了date 和 el，因为el代表的含义是 根节点。

• 在组件当中的data必须是一个函数，函数必须要返回一个 新对象
  
  3、为什么组件的data要是函数，并且返回一个对象？

• 因为组件要实现复用，如果data为对象，复用时内部的值就会重复

参数1：组件名， 参数2：配置对象

4、局部组件：就是一个普通对象，目的：利于模块化， 代码分割。（ 实际开发中多用局部开发）

二、子父组件数据通讯： 单向数据流

1、父传子： 要在子组件中通过 props 提前声明。
2、子传父： 通过外层 自定义事件，配合在子组件内部 $emit( )
注意；自定义事件名 不能写成驼峰
3、 插槽：slot
具名slot：通过 name 或 v-slot 来对应区分

为了进一步提升组件的复用
用 slot 相当于一个占位符，

1、动态组件：用compoent组件 配合 :is 来动态切换组件

没有路由时，借助component的 is 特性 来动态切换。

注意事项：解析dom模板时要注意的事项

标准的dom属性都要小写

单向的数据流： 是为了降低组件之间的复杂程度，同时增加组件的可复用性（ 解耦）

为了增加组件的健壮性，写组件的人，需要对组件传递的参数进行限制

2、prop验证：
自定义的验证器必须要返回一个 布尔值