组件的使用

1. vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，可以去调⽤对应的组件即可。

组件化和模块化的不同：

• 模块化：是从代码逻辑的⻆度进⾏划分的；⽅便代码分层开发，保证每个功能模块的职能单⼀
• 组件化：是从UI界⾯的⻆度进⾏划分的；前端的组件化，⽅便UI组件的重⽤
  注意：组件中的DOM结构，有且只能有唯⼀的根元（RootElement）来进⾏包裹！

1.1. 组件中展示数据和响应事件

在组件中，data需要被定义为⼀个⽅法，

为什么组件中的data属性必须定义为⼀个⽅法并返回⼀个对象

• 数据隔离

1.2. 使⽤flag标识符结合v-if和v-else切换组件

1.3. 使⽤:is属性来切换不同的⼦组件，并添加切换动画

• 使⽤component标签，来引⽤组件，并通过:is属性来指定要加载的组件
• mode只能应用于组件，

⽗组件向⼦组件传参

• 在父组件的子标签中自定义一个属性，在⼦组件通过props接收
• 接收的父组件的数据不能改变，只能使用。可以声明多种类型
• 设置默认值
• 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值

1.4.2. ⼦组件向⽗组件传参

• 在父组件的子标签中自定义一个事件，事件里的参数接收来自子组件的传值。子组件中方法（第一个参数：自定义事件的名字，第二个参数：要传递的数据 this.$emit（‘1.名字’，2.数据））