vue3.3编译宏

<template>
  <Child @send="getName" :data="list">
    <template #default="{ item, index }">
      <div>{
    
    {
    
     item.name }}---{
    
    {
    
     index }}</div>
    </template>
  </Child>
</template>

<script setup lang="ts">
import Child from "./views/child.vue";

const getName = (name: any) => {
    
    
  console.log(name);
};
const list = [
  {
    
    
    name: "张三",
    age: 18,
  },
  {
    
    
    name: "李四",
    age: 20,
  },
];
</script>

<style></style>

组件：

<template>
  <button @click="send">派发</button>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <slot :item="item" :index="index"></slot>
      </li>
    </ul>
  </div>
</template>

<script setup generic="T" lang="ts">
// 普通的方式
import type {
    
     PropType } from "vue";
// defineSlots 只有声明没有实现 没有任何参数 只能接受ts 的类型
defineSlots<{
    
    
  default(props: {
    
     item: any; index: number }): void;
}>();
// const props = defineProps({
    
    
//   name: {
    
    
//     type: Array as PropType<string[]>,
//     required: true,
//   },
// });
// const props = defineProps<{
    
    
//   name: string[];
// }>();
// props.name;

defineProps<{
    
    
  data: string[];
}>();

// 普通的写法定义一个数组
// const emit = defineEmits(["send"]);
// ts写法
// const emit = defineEmits<{
    
    
//   (event: string, name: string): void;
// }>();
// vue3.3的改进
// const emit = defineEmits<{
    
    
//   send: [name: string];
// }>();
// const send = () => {
    
    
//   emit("send", "hello");
// };
// vue3.3 内置了defineOptions 不需要再去下载插件了
// 它里面的属性跟optionsAPI 一模一样的
// 常用的属性定义name

defineOptions({
    
    
  name: "xm",
});
</script>

<style></style>

效果图：