vue2的slot插槽

vue2的slot插槽

1.定义插槽

插槽使用slot标签来标识，并且插槽是放在组件的template模板里面的，vue允许向组件传递模板。Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。

定义模板

<!--假设这个组件叫my-com-->
<!--组件模板如下：-->
<template>
	<div>
        <p>---------------------</p>
        <slot name="slotname">这里是slot的默认值</slot>
        <p>---------------------</p>
    </div>
</template>

使用

使用的时候可以向其传递标签元素，也可以传递组件模板，而name属性是用来命名slot的，当有多个slot是，我们可以通过v-slot：name来指顶要插入的插槽。

<!--不传东西将使用默认值-->
<my-com></my-com>

<!--传递文本-->
<my-com>
	我是slot
</my-com>

<!--传递标签元素-->
<my-com>
	<a>我是a标签</a>
</my-com>

<!--传递模板,并指定使用哪个slot-->
<my-com>
	<template v-slot:slotname>
		<h3>模板</h3>
    </template>
</my-com>

2.作用域插槽

slot提供的是父级渲染，这句话怎么理解呢？可以回想一下，当我们传递template给slot时，是谁在调用子组件的，是父级调用的子组件的吧，也是父级传递模板到子组件的插槽的吧，那么就可以解释得通，为什么slot提供的是父渲染。

有时我们希望让传递过去的插槽内容能够访问子组件中才有的数据，而这时我们需要一些方法才能访问到子组件的数据，这时就有我们的作用域插槽了。

<!--假设有一个组件叫current-user-->
<!--里面包含了数据
  return {user:{
            firstname:"li",
            lastname:"si"
            }
        }
-->
<!--模板如下：-->
<template>
	<span>
        <!--在模板中只有子组件能访问user，而父级是没办法访问user的-->
  		<slot>{{ user.lastName }}</slot>
	</span>
</template>


<!--这是错误的示范：-->
<current-user>
  {{ user.firstName }}  <!--父级传递模板时是没办法直接访问到user-->
</current-user>


<!--解决方法：-->
<template>
	<span>
        <!--在插槽处提供一个user属性，这个属性通过v-bind绑定了user数据-->
  		<slot v-bind:user="user">
    		{{ user.lastName }}
  		</slot>
	</span>
</template>


<!--我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字-->
<current-user>
    <!--这个slotProps代指子组件的props-->
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>