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

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

Vue的props父傳子的示例代碼

瀏覽:32日期:2023-01-20 08:26:22

廢話不多少,父傳子做一個比喻

首頁想加一個圖片,但又不想每次都用img而且又讓img做css和動畫事件。此時最簡單的方法做一個頁面封裝,然后起一個名字讓首頁自己獲取,放一個地址就行!其他什么都不用管。

步驟如下:

第一步:創建一個組件,相當于創意文件夾,專門存小東西以后經常用

<template> <div> <img src='http://www.hdgsjgj.cn/bcjs/xxx.xx' alt=''> </div></template><script> export default{ data(){ return{} } }</script>

第二步:在首頁這邊引入該頁面

<script> import Images from '../../../components/imgs.vue' export default{ data(){ return{} }, components:{ 'xImage':Images } }</script>

第三步:把xImage放在HTML里

<template> <xImage :xxoo='imgs1'></xImage></template>

第四步:開始父傳子,有人不知道誰是父誰是子。能在HTML瞎起名的就是父,import入進來的肯定就是子了

:xxoo : 瞎起名的信號燈,用來告訴子頁面,土豆土豆我是地瓜

imgs1 : 這就是信號燈準備發射出去的東西

<template> <xImage :xxoo='imgs1'></xImage></template>export default{ data(){ return{imgs1:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589655320760&di=6b907426d0fdb6b3d8b30ae5dd3761be&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F94cad1c8a786c91706be5bdccf3d70cf3ac75791.jpg' } }, components:{ 'xImage':Images }}

第五步:

在子頁面接收剛才信號燈發過來的東西,有人以為直接把imgs1放進去就行了,大錯特錯哦?。。?!他接受的不是數據,而是我說的信號燈所以用props接收這個信號燈,然后把信號燈做一個要求,我只要這樣品質的土豆!其他的我不要

<template> <img :src='http://www.hdgsjgj.cn/bcjs/xxoo' alt=''></template><script> export default{ data(){ ... }, props:{ xxoo:String } }</script>

以下就是土豆有幾種類型

String : 普通的 ’xxxxx’ Number : 只要 123456789 Boolean: 只要true 或者 false Array:單個的變量儲多個值 [1,2,3] Object:對象{a:1,b:2}

到此這篇關于Vue的props父傳子的示例代碼的文章就介紹到這了,更多相關Vue props父傳子內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 福兰德PVC地板|PVC塑胶地板|PVC运动地板|PVC商用地板-中国弹性地板系统专业解决方案领先供应商! 福建成考网-福建成人高考网 | 福建自考_福建自学考试网 | 砂石生产线_石料生产线设备_制砂生产线设备价格_生产厂家-河南中誉鼎力智能装备有限公司 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 液氮罐(生物液氮罐)百科-无锡爱思科| 商标转让-商标注册-商标查询-软著专利服务平台 - 赣江万网 | 云南丰泰挖掘机修理厂-挖掘机维修,翻新,再制造的大型企业-云南丰泰工程机械维修有限公司 | 【直乐】河北石家庄脊柱侧弯医院_治疗椎间盘突出哪家医院好_骨科脊柱外科专业医院_治疗抽动症/关节病骨伤权威医院|排行-直乐矫形中医医院 | 挨踢网-大家的导航! | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 | 金现代信息产业股份有限公司--数字化解决方案供应商 | 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 环氧铁红防锈漆_环氧漆_无溶剂环氧涂料_环氧防腐漆-华川涂料 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 环境模拟实验室_液体-气体控温机_气体控温箱_无锡双润冷却科技有限公司 | 香港新时代国际美容美发化妆美甲培训学校-26年培训经验,值得信赖! | X光检测仪_食品金属异物检测机_X射线检测设备_微现检测 | 粘度计维修,在线粘度计,二手博勒飞粘度计维修|收购-天津市祥睿科技有限公司 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 玉米深加工设备-玉米深加工机械-新型玉米工机械生产厂家-河南粮院机械制造有限公司 | 杰恒蠕动泵-蠕动泵专业厂家-19年专注蠕动泵 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | 武汉刮刮奖_刮刮卡印刷厂_为企业提供门票印刷_武汉合格证印刷_现金劵代金券印刷制作 - 武汉泽雅印刷有限公司 | PCB接线端子_栅板式端子_线路板连接器_端子排生产厂家-置恒电气 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 对辊破碎机-液压双辊式,强力双齿辊,四辊破碎机价格_巩义市金联机械设备生产厂家 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | 节流截止放空阀-不锈钢阀门-气动|电动截止阀-鸿华阀门有限公司 | 破碎机_上海破碎机_破碎机设备_破碎机厂家-上海山卓重工机械有限公司 | 绿萝净除甲醛|深圳除甲醛公司|测甲醛怎么收费|培训机构|电影院|办公室|车内|室内除甲醛案例|原理|方法|价格立马咨询 | 转向助力泵/水泵/发电机皮带轮生产厂家-锦州华一精工有限公司 | 道康宁消泡剂-瓦克-大川进口消泡剂供应商 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 实木家具_实木家具定制_全屋定制_美式家具_圣蒂斯堡官网 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 |