Vue组件

一、父子组件传参

1、父传子

1、先给父组件的子标签中自定义一个属性

<div num="100"></div>

2、在子组件中用props接收，接收的父组件的数据不能改变，只能使用

props: {
// num: [String],
// 可以声明多种类型
numb:[Number,String],
// 设置默认值
num:{
type:[Number,String],
default:200
 }
},

2、子传父

1、先给父组件的子标签中自定义一个属性

<swiper @getSwiper="getSwiper1"></swiper>

2、（1）自定义事件的名字 （2）要传递的数据

this.$emit('getSwiper',this.str)

二、component标签

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

<component :is="page"></component>

三、Vue组件

1、什么是组件

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

2、组件化和模块化的不同

（1）模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
（2）组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
data（） ：数据隔离的效果