Vue中的slot插槽

前言：之前学VUE对插槽只有一个模糊的存值概念，最近在封装自定义组件时，再次学习一下。

通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参，简化了进行自定义组件的封装和使用。

自己对插槽理解

就是一个站位HTML模板，用来携带内容，插入到合适的位置，由父组件来决定其显示的内容，使得模块具有更强的复用性。

单个slot （默认插槽 或 匿名插槽）

就是没有名字的插槽，一个组件里面只允许存在一个匿名插槽。

父组件内容

    <div class="fa">
        <h1>父组件</h1>
        <child>
           <p>父组件中写的文本</p>
        </child>
    </div>
    

子组件内容

• 父组件在child子组件中放置p标签，子组件中想要显示p标签，就必须放置slot

	<div class="child">
	 	<h2>子组件</h2>
	    <slot>匿名插槽的默认内容</slot>
	</div>

编译结果如下：

• child组件slot里的内容会替换成 p标签里面的内容，如果父组件没有在子组件插入内容则会渲染slot里面的默认内容。

   
    <div class="fa">
		<div class="child">
			<h2>子组件</h2>
			<p>父组件中写的文本</p>
		</div>
    </div>
    

具名slot

slot 元素有一个name特性，可以为slot命名，多个 slot 可以有不同的名字，用来渲染不同的内容。

父组件内容

	
	<div class="fa">
		<h1>父组件</h1>
		<child>
			<div class="son"