21 - 函数式组件

[bladeyon]

<script setup lang="ts">
import { ref, h } from "vue";

/**
 * 实现该函数式组件 :
 * 1. 使用`list`数据渲染列表元素 (ul/li)
 * 2. 当点击列表子元素时,将其文本颜色更改为红色
 */
const ListComponent = (props, { emit }) => {
  const { list } = props;
  const children = list.map((item, idx) => {
    return h(
      "li",
      { "data-id": idx, class: props["active-index"] === idx ? "red" : "" },
      item.name
    );
  });

  return h(
    "ul",
    {
      onClick(e) {
        let id = e.target.dataset.id;
        emit("toggle", +id);
      }
    },
    children
  );
};

const list = [
  {
    name: "John"
  },
  {
    name: "Doe"
  },
  {
    name: "Smith"
  }
];

const activeIndex = ref(0);

function toggle(index: number) {
  activeIndex.value = index;
}
</script>

<template>
  <list-component :list="list" :active-index="activeIndex" @toggle="toggle" />
</template>

<style>
ul li.red {
  color: red;
}
</style>