Vue（2）插槽

请对照vue文档查看

1. 插槽的内容

说白了就是提前占位置的，有传内容进来我就显示传进来的内容，没有就显示默认的内容。
复制代码

组件：

    // <navigation-link> 组件的内容
    
    <a v-bind:href="url" class="nav-link">
        <slot></slot> // 占个位置，没有默认内容，也就是所谓的后备内容
    </a>
复制代码

使用 <navigation-link> 组件： 传入普通文本

    <navigation-link>
        插槽  // 传入的内容
    </navigation-link>
复制代码

渲染：

    <a class="nav-link">
        插槽
    </a>
复制代码

使用 <navigation-link> 组件： 传入标签

    <navigation-link>
        <div>123</div> // 传入的内容
    </navigation-link>
复制代码

渲染：

    <a class="nav-link">
        <div>123</div>
    </a>
复制代码

组件就不写了，可以自己试试。

传入的内容可以是 标签，组件，文本

2.编译作用域

插槽内容  访问不到  插槽内容的父组件的值
复制代码

3.后备内容

后备内容说的就是默认值了。

组件：
复制代码

    // <navigation-link> 组件的内容
    
    <a v-bind:href="url" class="nav-link">
        <slot>我是后备内容</slot> // 占个位置，有默认内容
    </a>
复制代码

如果不给 传入内容

使用 <navigation-link> 组件：

    <navigation-link>
    </navigation-link>
复制代码

渲染：

    <a class="nav-link">
       我是后备内容
    </a>
复制代码

如果给 <navigation-link> 传入内容

使用 <navigation-link> 组件：

    <navigation-link>
        123 // 可以传入标签 组件 文本
    </navigation-link>
复制代码

渲染：

    <a class="nav-link">
       123
    </a>
复制代码

4.具名插槽

简单点就是插槽起个名字，本身不给起名字的话会隐式的有个名字： “default”。

什么情况下使用具名插槽：就是当你这个组件中有多个插槽时，因为渲染的时候，不写名字都渲染到了名为default的插槽上了。

    // <navigation-link> 组件的内容
    
    <a v-bind:href="url" class="nav-link">
        <slot name="a"></slot>
        <slot name="b"></slot>
        <slot name="c"></slot>
    </a>
复制代码

使用 <navigation-link> 组件： 传入普通文本

    <navigation-link>
        <div slot="a">aaa</div>          // slot="a" 这个语法被废弃了，但是vue2中可以用。vue3中将不能使用
        <span slot="b">bbb</span>
        <template v-slot:c>ccc</template>  // v-slot:c  这个指令必须在template标签上使用，否者报错
    </navigation-link>
复制代码

渲染：

    <a class="nav-link">
        <div>aaa</div>
        <span>ccc</span>
        ccc
    </a>
复制代码

5.作用域插槽

官网中说的 slotProps（这个变量可以是任意名字） 的值是带有插槽模板中插槽标签 slot 上绑定的属性

Vue.component('currentUser',{
	template:`
		<span>
		  <slot :user = "user">
			{{user.lastName}}
		  </slot>
		</span>
	`,
	props:{
            user:{
                type:Object,
                default:function(){
                    return{
                            firstName:'XIAO',
                            lastName :'XI'
                    }
                }
            }
	}
})
复制代码

使用 currentUser 组件

    <current-user >
        <template v-slot:default="slotProps">
            {{ slotProps.user.firstName }}
        </template>
    </current-user>	
复制代码

（1）独占默认插槽的缩写语法

只有一个插槽时可以简写 v-slot=”slotProps” (v-slot=”aaa” 是可以在template标签上写的。但是v-slot:aaa是具名插槽时写的。别搞混了)。多个插槽的话需要 遵循 template 的语法

（2）解构插槽 Prop

可以写为 v-slot="{user}" 将slotProps对象中的user属性结构出来

重命名：v-slot="{user:aaa}"

定义后备内容，用于插槽 prop 是 undefined 的情形： v-slot="{ user = { firstName: 'Guest' } }"

具名插槽的缩写

这个缩写只能在template标签上缩写，

    v-slot:a="{user}"  写为   #a="{user}"
    v-slot="{user}"    写为   #default="{user}"
    v-slot:aa          写为   #aa
复制代码

其它示例

这个是一个例子，看文档就行

只供自己学习！！！错了请留言。。。