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 处理,谢谢!