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

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

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

瀏覽:72日期: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
相關文章:
主站蜘蛛池模板: 大_小鼠elisa试剂盒-植物_人Elisa试剂盒-PCR荧光定量试剂盒-上海一研生物科技有限公司 | 物和码官网,物和码,免费一物一码数字化营销SaaS平台 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | 造价工程师网,考试时间查询,报名入口信息-网站首页 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 昆山新莱洁净应用材料股份有限公司-卫生级蝶阀,无菌取样阀,不锈钢隔膜阀,换向阀,离心泵 | 上海刑事律师|刑事辩护律师|专业刑事犯罪辩护律师免费咨询-[尤辰荣]金牌上海刑事律师团队 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 土壤墒情监测站_土壤墒情监测仪_土壤墒情监测系统_管式土壤墒情站-山东风途物联网 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | 淄博不锈钢无缝管,淄博不锈钢管-鑫门物资有限公司 | 成都办公室装修-办公室设计-写字楼装修设计-厂房装修-四川和信建筑装饰工程有限公司 | 浙江自考_浙江自学考试网| 天然气分析仪-液化气二甲醚分析仪|传昊仪器 | 999范文网_优质范文下载写作帮手 | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 裹包机|裹膜机|缠膜机|绕膜机-上海晏陵智能设备有限公司 | 继电器模组-IO端子台-plc连接线-省配线模组厂家-世麦德 | 机械加工_绞车配件_立式离心机_减速机-洛阳三永机械厂 | OpenI 启智 新一代人工智能开源开放平台| 日本细胞免疫疗法_肿瘤免疫治疗_NK细胞疗法 - 免疫密码 | 电磁铁_小型推拉电磁铁_电磁阀厂家-深圳市宗泰电机有限公司 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 深圳市宏康仪器科技有限公司-模拟高空低压试验箱-高温防爆试验箱-温控短路试验箱【官网】 | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 砂石生产线_石料生产线设备_制砂生产线设备价格_生产厂家-河南中誉鼎力智能装备有限公司 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 立式壁挂广告机厂家-红外电容触摸一体机价格-华邦瀛 | 石家庄装修设计_室内家装设计_别墅装饰装修公司-石家庄金舍装饰官网 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 砂磨机_立式纳米砂磨机_实验室砂磨机-广州儒佳化工设备厂家 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 施工电梯_齿条货梯_烟囱电梯_物料提升机-河南大诚机械制造有限公司 | 带式过滤机厂家_价格_型号规格参数-江西核威环保科技有限公司 |