父子组件间的通信，插槽(slot)

一.父子组件间的通信

1.父向子传递父组件里面拥有的信息（借助props）

父组件

 子组件：

注意：props中的数据只可以只读不可编辑

 2.子向父传递信息：子组件可以使用 $emit,让父组件监听到自定义事件 。

父组件：

 子组件：vm.$emit( event, arg ) //触发当前实例上的事件

二.插槽(slot)

1.什么是插槽？

插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重要性。插槽显不显示是由父组件控制的，而插槽在哪里显示是由子组件控制的。

2.插槽的分类:

插槽有三种:默认插槽，具名插槽，作用域插槽;

3.插槽的使用：

（1）默认插槽的使用：

语法：

<slot></slot>

1.首先，在子组件中定义默认的插槽

 

注意：在子组件中，你可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

2.在父组件中子组件的标签里写出自己想要写的内容。

父组件定义要插入到子组件插槽的内容，并不一定是dom结构类型，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。

（2）具名插槽：在子组件中定义插槽是，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容

语法：

<slot name="名称"></slot>

 

 

 （3）作用域插槽：实现在子组件自行决定自己要显示什么内容

语法：

<slot :自定义的name=data中的属性或对象></slot>

子组件有多个作用域插槽时：