5.vue组件间通信——插槽（slot）

一、具名插槽slot

1、理解

    此方式用于父组件向子组件传递标签数据

2、子组件中

<slot name="btn"></slot>

3、父组件中

<Todocount :allcount="allcount" :donecount="donecount">
 <div slot="btn" v-show="allcount!=0"><button @click="clearDone">清空所有完成任务</button>                </div>
</Todocount>

二、作用域插槽slot-scope

1、理解

        此方式用于子组件向父组件传递数据

2、父组件中

   <Child>
	 <div slot="content" slot-scope="msg">{{msg.data}}</div>
   </Child>

3、子组件中

 <slot name="content" :data="msg"></slot>	
   data(){
				return{
					msg:"这是内容"
				}
   }

三、v-slot

1、理解

       v-slot的出现是为了代替原有的slot和slot-scope

2、具名插槽

1）父组件

    <Son>
      <template v-slot:a><!-- 这里注意是v-slot:子组件的插槽名 -->
        <span>替换了</span>
      </template>
    </Son>

2）子组件

 <slot name="a">
    </slot>

3、作用域插槽

1）父组件

    <Son>
      <template v-slot:son="msg"><!--这里看清楚噢-->
        <span>{{msg}}</span>
      </template>
    </Son>

2）子组件

    <div>
  我是子组件
  <slot name="son" :data="msg">我是默认名称:{{name}}</slot>
</div>