学习 vue 插槽 slot 的使用总结

本文详细介绍了Vue.js中的插槽（slot）机制，包括简单插槽、具名插槽和作用域插槽的使用。通过实例代码展示了如何在父组件和子组件间传递内容，实现组件的动态内容分发。同时，解释了编辑作用域的概念，说明了父组件和子组件模板内容的独立编译。最后，探讨了作用域插槽的解构，展示如何访问和使用子组件的数据。

简单理解slot ：

		通俗易懂的讲，slot具有   占坑  的作用，
		在子组件占好了位置，
		那父组件使用该子组件标签时，
		新添加的 DOM元素 就会自动填到这个坑里面

具名插槽：

实现：

		先在子组件对应分发slot标签里，
		添加name='name名' 属性，
		其次父组件在要分发的标签里添加 slot='name名' 属性，
		然后就会将对应的标签放在对应的位置了

简单理解就是：

		给子组件占的每一个坑取名，
		将父组件添加的 HTML元素 添加到指定名字的坑，
		就实现了分发内容在不同位置显示。

演示代码片段：

	父组件：	
		import 子组件 Son

			<Son>
				  <span slot='top'>具名插槽</span>
				  <span slot="header">上</span>
				  <span slot="center">中间</span>
				  <span slot="footer">下</span>
			</Son>

	子组件：

		<template>
			  <h3>子组件</h3>
			  <div>
			  		<slot name='top'></slot>
				    <slot name="header"></slot>
				    <slot name="center"></slot>
				    <slot name="footer"></slot>
			  </div>
		</template>

	成果：

在这里插入图片描述

编辑作用域：

实现：

	父组件模板的内容在父组件作用域内编译；
	子组件模板的内容在子组件作用域内编译；

演示代码片段：

	父组件：

	import 子组件 Son

		<template>
			  <Son>
				    <span slot="header">编辑作用域</span>
				    <h1>{{msg}}</h1>
			  </Son>
		</template>
		<script>
		export default {
		  data() {
		    return {
		      msg: '我是父组件的内容'
		    }
		  }
		}
		</script>

	子组件：

		<template>
			  <h3>子组件</h3>
			  <div>
				    <slot name="header"></slot>
				    <h1>{{msg}}</h1>
				    <slot></slot>
			  </div>
		</template>
		<script>
		export default {
		  data() {
		    return {
		      msg: '我是子组件里面的内容'
		    }
		  }
		}
		</script>

	成果：

在这里插入图片描述

解构 slot-scope：

实现：

	在子组件中插槽中通过：data绑定了数据，
	父组件可以通过slot-scope="name"来取得子组件作用域插槽：data绑定的数据，
	name的名称可以随便取，
	用来定义对象来代替取到的data数据。

演示代码片段：

	父组件：
	import 子组件 Son

		<template>
		    <Son>
		      <div slot-scope="ok">
		        <span v-for="item in ok.data">{{item}} </span>
		      </div>
		    </Son>
		 
		    <!-- 直接显示数据 -->
		    <Son>
		      <div slot-scope="ok">
		        <span>{{ok.dataInnerText}} </span>
		      </div>
		    </Son>
		 
		    <!-- 不使用其提供的数据, 作用域插槽退变成匿名插槽 -->
		    <Son>
		      <div>我是插槽</div>
		    </Son>
		  </template>

	 子组件：

		  <template>
		  	  <h3>子组件</h3>
			  <div>
			   		<slot :dataInnerText="dataInner"></slot>
			  </div>
		</template>
		<script>
		export default {
		  data() {
		    return {
		      dataInner: ["one-", "-two-", "-three-", "-four"]
		    }
		  }
		}
		</script>