## 组件和组件间通信
### 组件
> 组件分为模版、脚本、样式三个部分
> 我们新建一个名为son.vue的单文件组件
~~~html
<template>
<div>我是你的小儿子</div>
</template>
<script>
export default{
data(){
return {
hello:"bizzbee"
}
},
methods:{
}
}
</script>
<style>
</style>
~~~
> 我们在父组件中使用自组件
* 导入子组件
~~~
import son from './components/son'
~~~
* 注册组件
~~~javascript
components: {
son
},
~~~
* 使用子组件
~~~javascript
<son />
~~~
### 组件间通信
> 组件间通信分为两种：子组件->父组件、父组件->子组件
**父组件->子组件**
* 将需要传递给子组件的数据放到子组件标签中
~~~html
<son name="今晚吃鸡" />
~~~
* 父组件中用props接收，此时就可以直接在子组件中使用了
~~~javascript
export default{
props:['name'],
data(){
return {
hello:"bizzbee"
}
},
}
~~~
props属性不仅可以接收数组，也可以接收对象。在接收对象是，可以指定接收值类型。
**动态传递**
* 使用v-bind绑定一个动态的值
~~~html
<input type="text" v-model="name" />
<son :name="name" />
~~~
**父组件<-子组件**
* 首先在子组件中定义一个事件，在事件的处理函数中调用`$emit()`方法
~~~html
<button @click="emitEvent">emit</button>
~~~
~~~javascript
methods:{
emitEvent(){
this.$emit('my-event',this.hello);
}
}
~~~
> $emit()方法的第一个参数是父组件中接收的时候需要用到的，第二个参数是向父组件传递的值。
* 在父组件的子组件标签中定义一个$emit()触发的事件，事件名是$emit()的第一个参数
~~~
<son :name="name" @my-event="getSon"/>
methods:{
getSon(name){
console.log(name);
}
}
~~~
**插槽功能**
>插槽功能是父组件向子组件传递一些类似模版的html片段。
* 在父组件的子组件标签中，写入一段html内容。
~~~html
<son :name="name" @my-event="getSon">
<h1>我是插槽里来得东西</h1>
</son>
~~~
* 在父组件中使用插槽传递的元素
~~~html
<slot></slot>
~~~
* 当我们需要细分插槽中的某些元素是，可以给插槽起个名字，也就是具名插槽
> 父组件
~~~html
<son :name="name" @my-event="getSon">
<h1>我是插槽里来得东西</h1>
<p slot="header">我是有名字的插槽</p>
</son>
~~~
> 子组件
~~~html
<slot name="header">no header</slot>
~~~
**动态组件**
用:is属性将组件挂载到任意标签上。
~~~
<p :is="currentComp"></p>
data(){
return {
currentComp:"son",
hello:"Hello,Bizzbee",
hi:"<p>hi，bizzbee</p>",
url:"http://cn.vuejs.org",
name:""
}
},
~~~
