21 - 函数式组件

[cone41]

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

/**
 * Implement a functional component :
 * 1. Render the list elements (ul/li) with the list data
 * 2. Change the list item text color to red when clicked.
 */
const ListComponent = (props, ctx) => {
  const lis = props.list.map((item, idx) =>
    h(
      'li',
      {
        style: props['active-index'] === idx ? { color: 'red' } : null,
        onClick: () => {
          ctx.emit('toggle', idx);
        },
      },
      item.name
    )
  );
  return h('ul', {}, lis);
};

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>