首页 网络技术
  1. 正文

vue如何实现函数式组件

 函数式组件

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

写法如下:

1.在template标签里面标明functional

2.只接受props值

3.不需要script标签

<!-- App.vue --><template><div id="app"><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 in props.items" @click="props.itemClick(item);">{{ item }}</p></div></template>

本文标题:vue如何实现函数式组件
本文链接:https://www.qqooo.cn/post/6933.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!