使用场景
若一个组件只用于展示数据，所有动态数据都从父组件传递进来（只有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>
