【大前端】说说vue的插槽

说说vue的插槽

本篇对

• 最基础内容
• 废弃语法

不再解释，主要对实际场景中可能运用出错的知识点进行归纳总结

插槽的出现，增加了组件可复用的场景，即使业务场景不一样，只要模板差不多就可以使用插槽。

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

可以像下面来实现后备内容：
子组件：

<button type="submit">
  <slot>Submit</slot>
</button>

如果父组件不往插槽里添加内容，那么组件内容默认是Submit。
但是如果父组件往插槽里添加内容，那么Submit将会被所添加的内容覆盖

具名插槽

有些时候我们不想所插入内容总是一样的。这个时候我们可以用具名插槽里解决这个问题，可是让我们自定义每个插槽的内容。

举例:

<div>
	<slot name="header"></slot>
	<slot name="footer"></slot>
	<slot></slot>
</div>

不带name的slot出口会带有隐含名字“default”，也就是默认名字是default

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

结果渲染为：

<div >
  
    <h1>Here might be a page title</h1>
    <p>Here's some contact info</p>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
</div>

插槽的编译作用域

当你想在插槽中显示当前调用者数据的时候，你可以：

<current-user>
  {{ user.name }}
</current-user>

现在页面上就会显示user.name的信息
当你想在current-user文件内获取user.name这个属性的时候，是访问不到的

引用官网的一句话：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

下面说一说如何通过插槽来实现父组件访问子组件的数据呢，可以通过插槽prop，可以像下面这样做：
子组件：

<span>
  <slot v-bind:user="user">
    {{ user.name }}
  </slot>
</span>

这个user数据为子组件的数据

父组件：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.name }}
  </template>
</current-user>

这样就可以实现上面的效果了

插槽缩写

v-slot:default -> v-slot

具名插槽缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:)替换为字符 #。例如 v-slot:header 可以被重写为 #header：