- views/Home.vue
<template lang="html">
<div class="">
<list :items="items" :aaa="item => (clicked = item)" />
<p>{{ clicked }}</p>
</div>
</template>
<script>
import List from "@/components/List";
export default {
data() {
return {
items: ["JonSnow", "Cercei"],
clicked: ""
};
},
components: {
List
}
};
</script>
复制代码
- componetns/List.vue
<template functional>
<div class="">
<p v-for="item in props.items" @click="props.aaa(item)">
{{ item }}
</p>
</div>
</template>
复制代码
函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。