vue插槽使用

一、匿名插槽

• slot中可以设置默认内容，当父组件未传递内容则slot区显示默认内容！
• slot中也可以不设置默认内容，当父组件传递内容slot区显示传递内容，当父组件不传递内容slot区不显示！
• 子组件中多个匿名插槽会显示重复内容

<!-- 父组件结构 -->
<template>
	<div>
		<!-- 引用子组件 -->
		<Child>
			<!--想在slot组件中显示的内容写在这里-->
			<ul>
				<li>html结构1</li>
				<li>html结构2</li>
			</ul>
			{{也可以直接是数据}}
			{{_DATA.name}}
		</Child>
	</div>	
</tempalte>
<script>
	export default {
		data() {
			return {
				_DATA: {
					name: 'MY',
					age: '45'
				}
			}
		}
	}
</script>

<!--子组件的结构-->
<template>
	<div>
		<slot>{{默认显示内容}}</slot>
	</div>
</template>
<script>

</script>

二、具名插槽

• 多个slot插槽控制如何让传入的内容显示正确的位置
• 重复命名v-slot后面的会覆盖前面的内容
• v-slot只能在template模板标签上使用
• 除了具名插槽外的其他内容均为匿名插槽的内容
• -子组件中多个匿名或者具名插槽都会显示重复内容

<template>
	<div>
		<!-- 引用子组件 -->
		<Child>
			<!--子组件中默认的匿名组件的内容-->
			<ul>
				<li>html结构1</li>
				<li>html结构2</li>
			</ul>
			<!--或者这样---子组件中默认的匿名组件的内容-->
			<template>
				<ul>
					<li>html结构1</li>
					<li>html结构2</li>
				</ul>
			</template>
			<template v-slot:one>
				<!--子组件中name=one的插槽显示的内容-->
			</template>
			<template v-solt:two>
				<!--子组件中name=two的插槽显示的内容-->
			</template>
		</Child>
	</div>	
</tempalte>
<script>
	export default {
		data() {
			return {
				_DATA: {
					name: 'MY',
					age: '45'
				}
			}
		}
	}
</script>

<!--子组件的结构-->
<template>
	<div>
		<slot>{{默认显示内容}}</slot>
		<slot name="one"></slot>
		<slot name="two"></slot>
	</div>
</template>
<script>

</script>

三、作用域插槽

• 父组件只能访问渲染父组件的数据不可以访问子组件的数据
• 父组件渲染子组件的相关数据，子组件绑定数据v-bind=“data”，父组件内接收v-slot:slot名称=“MyData”

子组件传入对象
data = {
	userName: '菜菜子前端',
    otherName: '前端菜菜子'
}
父组件接收对象
MyData = {
	data:{
		userName: '菜菜子前端',
    	otherName: '前端菜菜子'
	}
}

父组件使用时，MyData.data.userName------>'菜菜子前端'

<template>
	<div>
		<Child>
			<template v-slot:default="MyData">{{MyData.MydataBox.userName}}</template>
			<template v-slot:one="MyData">{{MyData.MydataBox.otherName}}</template>
			<template #two="MyData">{{MyData.MydataBox.otherName}}</template>
		</Child>
	</div>
</template>

<!-- 子组件内容 -->
<template>
  <div class="container">
    <span>
      <slot :MydataBox="MydataBox">
        {{MydataBox.userName}}
      </slot>
      <slot name="one" :MydataBox="MydataBox">
        {{MydataBox.otherName}}
      </slot>
      <slot name="two" :MydataBox="MydataBox"></slot>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
        MydataBox: {
          userName: '菜菜子前端',
          otherName: '前端菜菜子'
        }
    };
  },
};
</script>

<style scoped>
</style>