vue中作用域插槽的使用场景

Vue中的作用域插槽

作用域插槽概念:
当父组件中需要使用子组件中的数据的时候需要使用作用域插槽

场景如下:

父组件传递一个数组给子组件,子组件中渲染了数组中的name属性,现在希望通过插槽展示age这个属性.

代码如下:

<template>
  <div>
    <Son :list="list">
        <template v-slot="slotProps">
            {{ slotProps.row.age }}
        </template>
        //简写 v-slot后是一个对象通过解构获取子组件传递的对象数据 二选一即可
        <template v-slot="{row}">
            {{ row.age }}
        </template>
    </Son>
  </div>
</template>

<script>
import Son from './son.vue';
export default {
  name: 'index',
  components: {
    Son
  },
  data() {
    return {
      list:[
        {name:"cc",age:18},
        {name:"sc",age:19},
        {name:"yf",age:20},
        {name:"yw",age:21},
      ]
    };
  }
}
</script>

<template>
  <div>
    <div v-for="item in list" :key="item.name">
        <div>
            {{ item.name }}
        </div>
        <div>
            <slot :row="item">
            </slot>
        </div>
        <div>
            ---------------
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'son',
  props: {
    list:{
        type: Array,
        default: () => []
    }
  },
}
</script>

作用域插槽的用法:

子组件留出来slot标签

<slot :自定义属性名="传递过去的属性">
<slot/>

父组件在组件标签中使用传递过来的数据

<son>
	<template v-slot="父自定义属性名">
		<div>
			{{父自定义属性名.子传递过来的数据}}
		</div>
	</template>
<son/>