具名插槽 作用域插槽 在 Vue3.0 与 Vue2.0中的使用

具名插槽

• 具名插槽一般带有name 很多使用场景中都需要向多个插槽传入内容 所以需要借助name属性区分对应哪一个插槽
• 在Vue3.0 中

// 创建一个子组件testHeader.vue
//  使用方式 1  
    // 父组件  内容区域可以直接加自己需要展示标签
    <testHeader> 哈哈哈哈 </testHeader>  
    // 子组件直接接收
    <template>
        <div>
           <slot></slot>
        </div>
    </template>
    
//方式 2 template + v-slot  一般在组建需要多个插槽时使用
<testHeader>
    <template v-slot:header>
          将要插入的父组件中定义的内容
    </template>
    // 也可以写成下面这种 
    //<template #header>
      //    将要插入的父组件中定义的内容
    //</template>
</testHeader>
// v-slot 子组件接收时 必须声明name
<template>
    <div>
        <h3>我是header组建</h3>
         <slot name="header"></slot>
    </div>
</template>

具名插槽 Vue 2.0 版本中的应用

• Vue 3.0 中的写法相较与 Vue2.0 在使用方法上没有做明显更新

  // 在子组件中  这两种形式可以同时存在
  <slot></slot>  // 接收父组件传递的默认值
  <slot name='header'></slot> // 根据名字找对应的项 
  
  // 在父组件中
  // 引入 注册  声明子组件 testView
  <testView>
      哈哈哈 大傻子说二傻子是个傻子 
      <span>我是一个span 标签</span>
      
      // 使用模板
      <template>
          呵呵哒 对面的是二傻子吧
          <p>我是一个P标签</p>
      </template>
      
      // 模板添加名称 
      <template v-slot:header>
        
      </template>
    
      //模板名称简写
      <template #header>
      
      </template>
  </testView>

作用域插槽在 Vue3.0

• Vue3.0 中具名插槽的基本使用方法与Vue 2.0 无明显差异 只是本身的语法结构差异

// 在子组件中
     const data = reactive({
         list:['喜洋洋','美洋洋','沸洋洋',‘懒洋洋’],
         user:{name:"妮可 * 罗宾",sex:"girl"},
         label:"我是一个标签的值"
     })
    
    return {
        ...toRefs(data)
    }
    
    // 在组建模板中声明
    <slot :list="list" :user="user" :label='label'></slot>
    
    
    // 在父组件中
    // 引入 注册  声明子组件 testView
    
    <testView v-slot=‘slotProps’>
    // 可以使用模板 也可以不适用看自己需要  但不能混合
        // v-slot='slotProps'  如果使用了template 就声明在模板中
       
       <span>{{ slotProps.label }}<span/>
       <br>
       <p v-for='(item,index) in slotProps' :key= index>{{ item }}</p>
        
       <span>{{ slotProps.label }}</span>
    </testView>

作用域插槽 Vue2.0

• 父组件需要访问子组件中的作用域中的值时候 一般用到作用域插槽 上代码
• 我的理解是 子组件中的数据模板展示样式 父组件决定 子组件把数据回传给父组件 父组件分配

// 子组件中定义数据
    data() {
        return{
            user:{
                firstName:"蒙奇 D",
                lastName:"路飞",
                abs:"蒙奇 D 路飞"
            },
            list:['A','B','C','D','E','F'],
            obj:{
                abs:"蒙奇D 路飞",
                opr:'哈哈哈哈~'
            },
            label:'我是一个label........',
        }
    },
 // 子组件模板中声明需要传给父组件的数据
 <slot :user="user" :list="list" :obj="obj" :label="label"></slot>

// 在父组件中
       <testView>
         <template v-slot="slotProps">
         <br>
            <span>父组件拿到的子组件的name{{slotProps.user.abs}}</span>
            <div v-for="item in slotProps.list" :key="item">
              <span class="test">{{item}}</span>
            </div>
            <span>{{slotProps.obj.abs}}</span>
            <span>{{slotProps.label}}</span>
        </template>
      </testView>