vue【详解】functional —— 函数式组件

使用场景

 若一个组件只用于展示数据，所有动态数据都从父组件传递进来（只有props），内部没有逻辑交互（无methods方法、也没有mounted等任何生命周期处理函数），没有状态修改(无data)，则推荐使用函数式组件来提升vue的性能

使用方法

• 在template标签上加上关键字 functional

<template functional>      

• 使用 props. 获取父组件传递进来数据（函数也可以传入）

完整范例代码

<template>
    <div>
        <List :items="['苹果', '西瓜']" :itemClick="item => {clicked =item}"/>
        <p>点击了: {{ clicked }}</p>
    </div>
</template>
<script>
    import List from './List'
    export default {
        components: {List},
        data: () => {
            return {clicked: ""}
        },
    };
</script>      

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