vue中使用插槽

vue中使用插槽

一、默认插槽

父组件 index.vue

<template>
   <textDialog>
      <ul v-for="(item,index) in list">
        <li>{{item.title}}</li>
      </ul>
    </textDialog>
</template>
data(){
	return{
		list: [
			{ title: '山竹' },
			{ title: '西瓜' }
		]
	}
}

子 组件 textDialog.vue

<template>
 	<div>
 	   <h3>这里是子组件</h3>
	   <slot></slot>
	</div>
</template>

二、具名插槽

顾名思义 为插槽取个名字 有个属性 attribute：name

可以通过name的定义来写多个插槽 名字需对应上

父组件 index.vue

<template>
   <textDialog>
      <ul slot="namOne" v-for="(item,index) in list">
        <li>{{item.title}}</li>
      </ul>
    </textDialog>
    <textDialog>
     	<p slot="nameTwo">我是第二个具名插槽</p>
    </textDialog>
</template>
data(){
	return{
		list: [
			{ title: '山竹' },
			{ title: '西瓜' }
		]
	}
}

子组件

<template>
   <div>
   	  <h3>这里是子组件</h3>
	  <slot name="nameOne"></slot>
	  <slot name="nameTwo"></slot>
   </div>
</template>

三、作用域插槽

带数据的插槽 内容是从子组件插槽中绑定

父组件 index.vue

<textDialog>
	//第一种方式 可以直接获取到数据
	<template slot-scope="{data}"> 
	    <ul v-for="(item,index) in data">
	       <li>{{item.title}}</li>
	    </ul>
	</template>
	//第二种方式 获取到的别名 需要在取一次数据才能获取到数据
	<template slot-scope="data"> 
	    <ul v-for="(item,index) in data.data">
	       <li>{{item.title}}</li>
	    </ul>
	</template>
</textDialog>

子组件 textDialog.vue

<template>
    <slot :data="list"></slot>
</template>
data(){
	return{
		list: [
			{ title: '刘哈哈' },
			{ title: '张嘻嘻' }
		]
	}
}

有不足的地方可以指点一二 共同努力💪