Skip to content

21 - 函数式组件 #2893

Open
Open
@cone41

Description

@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>

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions