1 初始项目

同HMVue6.1

npm install  或者 npm i 也行

npm audit fix

2 什么是插槽

3 插槽的基础用法

 

 

 

3 v-slot指令(简写#)

 

4 插槽的后备内容

5 具名插槽

5-1 课件

5-2 vant库插槽例子

具名插槽：自定义名字的插槽

匿名插槽：不带自定义名字，默认名字为default，或者自定义为default

Vant - 轻量、可靠的移动端组件库 (youzan.github.io)

 

5-3 具名插槽基本使用-例子

 

6 作用域插槽

6-1 课件

6-2 作用域插槽的基本使用

 

6-3 作用域插槽的解构赋值(解构插槽Prop)

 

 7 源码

<template>
<div class="app-container">
    <h1>App 根组件h1>
    <hr>

    <Article>
        <template v-slot:title>
            <h3>《赋得古原草送别》h3>
        template>
        

        
        <template #content="{msg,user}">
            <div>
                
                
                
                

                <p>{{msg}}p>
                
                <p>{{user.name}}p>
                
            div>
        template>
        <template #author>
            <div>白居易div>
        template>
    Article>
    <hr>

    <div class="box" style="display: none;">
        
        <Left>
            
            

            
            
            
            
            
            
            
            <template #default>
                <p>这是在 Left 组件的内容区域，声明的 p 标签p>
            template>

        Left>
    div>

div>
template>



<script>
import Left from '@/components/Left.vue'
import Article from '@/components/Article.vue'

export default {
    name: 'MySlotApp',
    components: {
        Left, Article
    }
}
script>



<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
style>

<template>
<div class="left-container">
    <h3>Left 组件h3>
    <hr>
    
    

    
    

    <slot name="default">
        <p>这是default插槽的默认内容p>
    slot>
div>
template>



<script>
export default {}
script>



<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
style>

<template>
<div class="article-container">

    
    <div class="header-box">
        <slot name="title">slot>
    div>

    
    <div class="content-box">
        
        

        
        <slot name="content" msg="hello vue" :user="userinfo">slot>
        
    div>

    
    <div class="footer-box">
        <slot name="author">slot>
    div>

div>
template>



<script>
export default {
    name: 'Article',
    data(){
        return{
            userinfo: {
                name: 'zs',
                age: 18
            }
        }
    }
}
script>




<style lang="less" scoped>
.article-container {
    > div {
        min-height: 150px;
    }
    .header-box {
        background-color: pink;
    }
    .content-box {
        background-color: lightblue;
    }
    .footer-box {
        background-color: lightsalmon;
    }
}
style>