首页 > 其他 > 详细

Vue 函数式组件 functional

时间:2020-07-24 10:14:35      阅读:151      评论:0      收藏:0      [点我收藏+]

函数式组件

  • 无状态
  • 无法实例化
  • 内部没有任何生命周期处理函数
  • 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改)
  • 在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.item" :key="index" @click="props.itemClick(item)" />
      </div>
</template>

Vue 函数式组件 functional

原文:https://www.cnblogs.com/leslie1943/p/13369338.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!