函数式组件

• 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>
复制代码

函数式组件，即无状态，无法实例化，内部没有任何生命周期处理方法，非常轻量，因而渲染性能高，特别适合用来只依赖外部数据传递而变化的组件。

转载于:https://juejin.im/post/5ce6311de51d454fbe24a5fd