Vue 函数式组件 functional

函数式组件

• 无状态
• 无法实例化
• 内部没有任何生命周期处理函数
• 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件，无逻辑和状态修改)
• 在template标签里标明functional
• 只接受props值
• 不需要script标签

父组件

 <template>
      <div>
        <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked =
        item)" />
        <p>Clicked hero: {{ clicked }}</p>
      </div>
</template>
<script>
import List from './List'
export default {
      name: "App",
      data: () => ({ clicked: "" }),
      components: { List }
};
</script>

List.vue 函数式组件

<template functional>
      <div>
            <p v-for="(item,index) in props.items" :key="index" @click="props.itemClick(item)" />
      </div>
</template>