Vue插槽语法

Vue插槽语法

• 将父组件利用 插槽 将 结构 传送到子组件 中
• 插槽的本质: 是组件标签中间传递结构

插槽 A 未传值,B 设默认内容/数据

• 语法：当父组件 没有 通过 插槽 向子组件传送数据时，子组件可设置默认内容/数据，以免出现错误

  //父组件   未传值
  //子组件   设置默认内容（数据/结构）
  <slot>默认数据/结构</slot>
  

• 获取组件传输过来默认的数据

  // 父组件
  <template v-slot:default="{row}"></template>
  //default 默认
  
  // 子组件
  <slot :row="user"></slot>
  <slot :row="arr" name="www"></slot>
  

插槽 数据传输 单个结构/数据传输

• 语法

  //父组件
  <子 组件名>
      //传输 结构/数据
      <p>数据</p>
  </子 组件名>
  //子组件
  <slot>接收结构/数据</slot>
  

• 语法口诀

  • 子组件内用占位
  • 使用父组件时，夹着的地方, 传入标签替换slot

---

具名插槽 多个结构/数据传输

• 语法:

//父组件
<子 组件名>
	<template #ww>//v-slot指令（简写：#）
        <p>123</p>
    </template>
</子 组件名>
<子 组件名>
	<template #mm>//v-slot指令（简写：#）
        <p>321</p>
    </template>
</子 组件名>
//子组件
<slot name="ww"></slot>
<slot name="mm"></slot>
//-----------------------------------------
 //父组件中的
<子 组件名>
    <template #ww>
        结构
    </template>
</子 组件名>
	==
//等同于
    ==
//子组件中的
    <slot name="ww">
        结构
    </slot>

---

作用域插槽（子组件 值 传 父组件）

• 作用域插槽:子组件 传 父组件

• 作用：更加灵活的运用各种场景

• 使用场景：使用组件插槽时，父组件 需要用到 子组件的 变量（数据）

• 口诀：

  • 子组件在slot身上添加属性和子组件的值
  • 使用组件处template配合v-slot=“变量名”（ 收集slot身上的所有属性和值）

• 语法

  //父组件
  <子 组件>
      <template v-slot="自定义名">//可解构
          <p>scope.row.内容</p>
      </template>
  </子 组件>
  //子组件
  <slot :自定义名="内容"></solt>
  

• 案例：子组件 传 父组件

  //例：
  //子组件
  <div v-for="(item,index) in arr" :key="index">
  //自定义 属性
  <slot :row="item"></solt>
  //row === item
  
  //父组件
  //v-solt 接收
  <template v-slot="aaa">
      <a :href="aaa.row.imgUrl" />
                  //row === item
          		//row.imgUrl === item.imgUrl
  </template>
  

---

具名插槽和作用域插槽 结合写法

//具名插槽和作用域插槽 结合写法
v-slot:body="scope"
//简写
#body="scope"
//v-slot：body         //具名插槽
//v-slot="scope"       //作用域插槽

• 具名插槽和作用域插槽（解构） 结合写法

#body="scope"		
#body="{row}"		//scope解构的来row
//v-slot：body         //具名插槽
//v-slot="scope"       //作用域插槽
 //v-slot="{row}"     //将scope 解构

---