电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

淺談Vue 函數式組件的使用技巧

瀏覽:71日期:2023-01-13 08:09:45

什么是函數式組件

沒有管理任何狀態,也沒有監聽任何傳遞給它的狀態,也沒有生命周期方法,它只是一個接受一些 prop 的函數。簡單來說是 一個無狀態和無實例的組件

基本寫法:

Vue.component(’my-component’, { functional: true, // Props 是可選的 props: { // ... }, // 為了彌補缺少的實例 // 提供第二個參數作為上下文 render: function(createElement, context) { // ... }})

.vue 單文件組件寫法

<template functional> ...</template>

因為函數式組件沒有 this,參數就是靠 context 來傳遞的了,有如下字段的對象:

props:提供所有 prop 的對象 children:VNode 子節點的數組 slots:一個函數,返回了包含所有插槽的對象 scopedSlots:(2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數形式暴露普通插槽。 data:傳遞給組件的整個數據對象,作為 createElement 的第二個參數傳入組件 parent:對父組件的引用 listeners:(2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監聽器的對象。這是 data.on 的一個別名。 injections:(2.3.0+) 如果使用了 inject 選項,則該對象包含了應當被注入的 property。

使用技巧

以下總結、都是基于使用 <template> 標簽開發函數式組件中遇到的問題

attr 與 listener 使用

平時我們在開發組件時,傳遞 prop 屬性以及事件等操作,都會使用v-bind='$attrs'和 v-on='$listeners'。而在函數式組件的寫法有所不同,attrs屬性集成在 data中。

<template functional> <div v-bind='data.attrs' v-on='listeners'> <h1>{{ props.title }}</h1> </div></template>

class 與 style 綁定

在引入函數式組件、直接綁定外層的class類名和style樣式是無效的。data.class 表示動態綁定class, data.staticClass 則表示綁定靜態class, data.staticClass 則是綁定內聯樣式TitleView.vue

<template functional> <div : :style='data.staticStyle'> <h1>{{ props.title }}</h1> </div></template>

Test.vue

<template> <title-view : /></template>

component 組件引入

函數式組件引入其他組件方式如下,具體參考:github.com/vuejs/vue/i…

<template functional> <div class='tv-button-cell'> <component :is='injections.components.TvButton' type='info' /> {{ props.title }} </component> </div></template><script>import TvButton from ’../TvButton’export default { inject: { components: { default: { TvButton } } }}</script>

$options 計算屬性

有時候需要修改prop數據源, 使用 Vue 提供的 $options 屬性,可以訪問這個特殊的方法。

<template functional> <div v-bind='data.attrs' v-on='listeners'> <h1>{{ $options.upadteName(props.title) }}</h1> </div></template><script> export default { updateName(val) { return ’hello’ + val } }</script>

總結

雖然速度和性能方面是函數式組件的優勢、但不等于就可以濫用,所以還需要根據實際情況選擇和權衡。比如在一些展示組件。例如, buttons, tags, cards,或者頁面是靜態文本,就很適合使用函數式組件。

到此這篇關于淺談Vue 函數式組件的使用技巧的文章就介紹到這了,更多相關Vue 函數式組件內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | PCB厂|线路板厂|深圳线路板厂|软硬结合板厂|电路板生产厂家|线路板|深圳电路板厂家|铝基板厂家|深联电路-专业生产PCB研发制造 | 成都中天自动化控制技术有限公司| led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 安徽成考网-安徽成人高考网 | 潍坊大集网-潍坊信息港-潍坊信息网 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 2025福建平潭岛旅游攻略|蓝眼泪,景点,住宿攻略-趣平潭网 | TYPE-C厂家|TYPE-C接口|TYPE-C防水母座|TYPE-C贴片-深圳步步精 | 重庆中专|职高|技校招生-重庆中专招生网 | 数显恒温培养摇床-卧式/台式恒温培养摇床|朗越仪器 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 闪蒸干燥机-喷雾干燥机-带式干燥机-桨叶干燥机-[常州佳一干燥设备] | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 内窥镜-工业内窥镜厂家【上海修远仪器仪表有限公司】 | 防渗土工膜|污水处理防渗膜|垃圾填埋场防渗膜-泰安佳路通工程材料有限公司 | 直流大电流电源,燃料电池检漏设备-上海政飞 | 【同风运车官网】一站式汽车托运服务平台,验车满意再付款 | 卫浴散热器,卫浴暖气片,卫生间背篓暖气片,华圣格浴室暖气片 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 播音主持培训-中影人教育播音主持学苑「官网」-中国艺考界的贵族学校 | 亚洲工业智能制造领域专业门户网站 - 亚洲自动化与机器人网 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | 涡街流量计_LUGB智能管道式高温防爆蒸汽温压补偿计量表-江苏凯铭仪表有限公司 | 干法制粒机_智能干法制粒机_张家港市开创机械制造有限公司 | 信阳网站建设专家-信阳时代网联-【信阳网站建设百度推广优质服务提供商】信阳网站建设|信阳网络公司|信阳网络营销推广 | 电动葫芦-河北悍象起重机械有限公司 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | 石英陶瓷,石英坩埚,二氧化硅陶瓷-淄博百特高新材料有限公司 | 二次元影像仪|二次元测量仪|拉力机|全自动影像测量仪厂家_苏州牧象仪器 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 合肥制氮机_合肥空压机厂家_安徽真空泵-凯圣精机 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 数年网路-免费在线工具您的在线工具箱-shuyear.com |