重新认识 v-slot

为什么不能用

有时候我们想在父组件中给子组件加点内容，满足开发需要。所以就想着以下做法：

假设 我们现在已经建好 nav-head 并引入了组件， 每次引用的时候传递不同的内容。

有时候我们会冲动的有以下写法：

<nav-head>我是 slot</nav-head> 

运行后会发现并不起效果。

vue 官方写到，如果 的 template 中没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

所以，我们在子组件 nav-head 中加入， slot

父级组件

<nav-head>我是 slot</nav-head>

NavHead 组件

<div class="nav-head">    
    <slot></slot>
</div>

当组件渲染的时候， 将会被替换为 “我是 slot”

插槽 slot

定义

实现内容分发

作用域

插槽的作用域是在父级，访问不到 的作用域

vue 规则：

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

设置默认

如果父级没有传递内容的时候， 标签内的内容会默认展示出来

父级组件

<nav-head></nav-head>

NavHead 组件

<div class="nav-head">    
    <slot>我是默认值</slot>
</div>

默认 slot

基本结构

父级组件

<nav-head>我是 slot</nav-head>

NavHead 组件

<div class="nav-head">    
    <slot></slot>
</div>

特点

1. 一个 template 标签中单个 slot 只能存在一个

2. slot="default" 忽略不写

具名 slot

描述

在 slot 标签中加入 name 属性，使得父级可以将内容插入对应的位置中

2.6 版本前的语法

基本结构

父级，在