vue3 插槽传递数据

Vue3中插槽(slot)用法汇总 - 掘金 (juejin.cn) 引用此链接的内容

基本使用

//父组件
<template>
  <div>
    <Child>Hello Juejin</Child>
  </div>
</template>
<script setup lang="ts">
import Child from './Child.vue'
</script>

//子组件Child
<template>
    <div>
        <p>1</p>
        <slot />
        <p>2</p>
    </div>
</template>

子组件中的<slot /> 便是父组件放在子组件标签<Child>标签之间的内容。

具名插槽

//子组件

<template>
    <div>
        <!-- 大萝卜 -->
        <div>
            <slot name="bigTurnip"></slot>
        </div>
        <!-- 小萝卜 -->
        <div>
            <slot name="smallTurnip"></slot>
        </div>
    </div>
</template>

//父组件

<template>
  <div>
    <Child>
      <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
      <template #smallTurnip>
        小萝卜
      </template>
      <template #bigTurnip>
        大萝卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

父组件 中 <Child>标签 之间的内容会根据 插槽的name属性，自动占位对应的name属性

具名插槽传值

//父组件
<template>
  <div>
    <Child>
      <template #bigTurnip="bigTurnipProps">
        {{ bigTurnipProps.message }} // 输出：我是萝卜
      </template>
    </Child>
  </div>
</template>
<script setup>
import Child from './Child.vue'
</script>

//子组件Child.vue

<template>
    <div>
        <div>
            <slot name="bigTurnip" message="我是萝北"></slot>
        </div>
    </div>
</template>

传递当前行的值

vue2

//组件页面
<el-table-column >  
             <template slot-scope="scope">
             //这个是element的功能slot-scope="scope"用来获取表格id
                  <slot name="bth" :data="scope.row">
                  //自己定义的插槽
                  </slot>
              </template>
 </el-table-column>

//父组件
<tableList>
   <template v-slot:bth="slot_data>
       <button @click='btnClick(slot_data)'></button>
   </template>
</tableList>

vue3

//组件页面
<el-table-column >  
             <template  #default = 'scope'>
                  <slot name="bth" :scope="scope">   </slot>
              </template>
 </el-table-column>

// 父组件类似

区别

3.0 <template #default = ‘scope’>

2.0 <template slot-scope=“scope”’>