21 - 函数式组件

[zzhao8053]

<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, {emit}) => {
  const nodes = props.list.map((i, index) => h(
    'li', 
    { 
      style: {
        color: props['active-index'] === index ? 'red' : 'black'
      }, 
      onClick() {
        emit('toggle', index)
      }, 
    },
  i.name
  ));
  return h('ul', nodes)
}

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>