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.数据))