<template>
    <div class=''>
        <h1>插槽作用域案例</h1>
        <AppChild :arr="state.arr">
            <template v-slot:btns="scope">
                <button @click="handleEdit(scope.index)">编辑</button>
            </template>
        </AppChild>
        <AppChild :arr="state.arr">
            <template #btns="{index}">
                <button @click="handleEdit(index)">编辑</button>
                <button>删除</button>
            </template>
        </AppChild>
    </div>
</template>

<script lang='ts' setup>
import AppChild from './16-AppChild.vue'
import { reactive } from 'vue'

let state = reactive({
    arr: [
        {
            name: '小红',
            age: 18,
        },{
            name: '小明',
            age: 20,
        }
    ]  
})

const handleEdit = (index: number) => {
    console.log(state.arr[index])
}
</script>

<style lang='scss' scoped>

</style>

<template>
    <div class=''>
        <table>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tr v-for="item,index in arr2" :key="index">
                <!-- 类型断言 “as 类型”就是 TypeScript 的“强转”，把变量临时当成你指定的形状来用 -->
                <!-- “item”的类型为“未知”，把 item 当成 {name: string} 这种结构来用，别报错。 -->
                <!-- <td>{{ (item as {name: string}).name }}</td> -->
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>
                    <slot name="btns" :index="index"></slot>
                </td>
            </tr>
        </table>
    </div>
</template>

<script lang='ts' setup>
import {  } from 'vue'

let props = defineProps({
    arr: {
        type: Array,
        default: []
    }
})

interface UserType {
    name: string,
    age: number
}

let arr2 = props.arr as UserType[]

</script>

<style scoped>
table {
    border-collapse: collapse;
}
table,tr,td {
    border: 1px solid #333;
}
tr,td {
    padding: 4px 8px;
}
</style>