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>