插槽

• summary:

  子组件:<component :is="xxx"/>
  父组件:<slot/>  // <slot></slot>

• 留空白写成自闭合标签：

  <slot/>

• 插槽内设置的标签，作用域在本页面内部

• 父组件=>子组件

  • 使用props，单项绑定数据传递

• 子组件=>父组件

• 默认值

  • text节点

  <slot>默认值</slot>

• name属性

  • 不传递name时，默认会插入默认插槽里 即 <slot name="default"/ >里

• 实操：

    父组件：<templatev v-slot:xxx/>
    子组件：<slot name="xxx"></slot>

• 简写： #

• 删除实现

  //1父级删除
  //父级设置删除事件，通过emit传递到子组件中，子组件设置emit接收
  del(lesson){
  	const index = this.lessons.findIndex(l=>l.id == lessons.id)
  	this.lessons.splice(idnex,1)
  }
  
  //2插槽删除
  //通过插槽进行父子组件数据传递
  父
  <lesson v-for="lesson in lessons" key="lesson.id" :lesson_item="lesson">
  	<template #default="id">
  		<button @click="del(id)">删除</button>
  	</template>
  </lesson>
  子
  <div>
  	<slot :id="lesson_item.id"> <slot/>
  </div>

  • 分开接收/全部接收

• 独占默认插槽

  • 父级标签上添加属性 #default="{xxx}" 子组件只有一个slot时才适用