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

您的位置:首頁技術(shù)文章
文章詳情頁

Vue父組件向子組件傳值以及data和props的區(qū)別詳解

瀏覽:76日期:2023-02-04 11:52:27

1.在父組件中定義 msg 屬性

data:{ msg:’123 -我是父組件中的數(shù)據(jù)’ },

2.引用子組件

父組件可以在引用子組件的時(shí)候,通過屬性綁定的形式,把需要傳遞給子組件的數(shù)據(jù),以屬性綁定的形式,傳遞到子組件內(nèi)部,供子組件使用。

把父組件傳遞過來的 msg 屬性,綁定到子組件的 parentmsg 屬性上。

<com1 :parentmsg='msg'></com1>

3. 在子組件定義部分,需要把父組件傳遞過來的 parentmsg 屬性,先在props數(shù)組中定義一下(代表這個(gè)屬性是由父組件傳遞過來的),這樣,才能使用這個(gè)數(shù)據(jù)

props:[’parentmsg’],

4.在子組件中使用

template:'<h1>這是子組件--{{parentmsg}}</h1>',

5.子組件中data和props的區(qū)別

子組件中的data數(shù)據(jù),不是通過父組件傳遞的是子組件私有的,是可讀可寫的。

子組件中的所有 props中的數(shù)據(jù),都是通過父組件傳遞給子組件的,是只讀的。

完整代碼:

<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> </head><body> <div id=’app’> <!-- 父組件可以在引用子組件的時(shí)候,通過屬性綁定的形式,把需要傳遞給子組件的數(shù)據(jù), 以屬性綁定的形式,傳遞到子組件內(nèi)部,供子組件使用 --> <com1 :parentmsg='msg'></com1> </div></body><script src='http://www.hdgsjgj.cn/lib/vue.js'></script><script> var vm = new Vue({ el:’#app’, data:{ msg:’123-我是父組件中的數(shù)據(jù)’ }, components:{ //子組件中無法訪問父組件的data和methods com1:{ //子組件中的data數(shù)據(jù),不是通過父組件傳遞的是子組件私有的 //data上的數(shù)據(jù),是可讀可寫的 data(){ return { title:’123’, content:’qqq’ } }, template:'<h1>這是子組件--{{parentmsg}}</h1>', //注意,組件中的所有 props中的數(shù)據(jù),都是通過父組件傳遞給子組件的 //只讀 props:[’parentmsg’],//把父組件傳遞過來的parentmsg屬性, //先在props數(shù)組中定義一下,這樣,才能使用這個(gè)數(shù)據(jù) methods:{ } } } })</script></html>

Vue父組件向子組件傳值以及data和props的區(qū)別詳解

到此這篇關(guān)于Vue父組件向子組件傳值以及data和props的區(qū)別詳解的文章就介紹到這了,更多相關(guān)Vue父組件向子組件傳值內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 网络推广公司_网络营销方案策划_企业网络推广外包平台-上海澜推网络 | 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | Jaeaiot捷易科技-英伟达AI显卡模组/GPU整机服务器供应商 | 细胞染色-流式双标-试剂盒免费代做-上海研谨生物科技有限公司 | 大米加工设备|大米加工机械|碾米成套设备|大米加工成套设备-河南成立粮油机械有限公司 | 槽钢冲孔机,槽钢三面冲,带钢冲孔机-山东兴田阳光智能装备股份有限公司 | 昆山PCB加工_SMT贴片_PCB抄板_线路板焊接加工-昆山腾宸电子科技有限公司 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 风化石头制砂机_方解石制砂机_瓷砖石子制砂机_华盛铭厂家 | 高铝轻质保温砖_刚玉莫来石砖厂家_轻质耐火砖价格| 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 一航网络-软件测评官网 | 陕西华春网络科技股份有限公司| 光栅尺厂家_数显表维修-苏州泽升精密机械 | 不发火防静电金属骨料_无机磨石_水泥自流平_修补砂浆厂家「圣威特」 | 压力变送器-上海武锐自动化设备有限公司| 整车VOC采样环境舱-甲醛VOC预处理舱-多舱法VOC检测环境仓-上海科绿特科技仪器有限公司 | 四川成都干燥设备_回转筒干燥机_脉冲除尘器_输送设备_热风炉_成都川工星科机电设备有限公司 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 | 定制液氮罐_小型气相液氮罐_自增压液氮罐_班德液氮罐厂家 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 光照全温振荡器(智能型)-恒隆仪器 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 高压包-点火器-高压发生器-点火变压器-江苏天网 | 沈阳建筑设计公司_加固改造设计_厂房设计_设计资质加盟【金辉设计】 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 十二星座查询(性格特点分析、星座运势解读) - 玄米星座网 | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 | 天津热油泵_管道泵_天津高温热油泵-天津市金丰泰机械泵业有限公司【官方网站】 | GAST/BRIWATEC/CINCINNATI/KARL-KLEIN/ZIEHL-ABEGG风机|亚喜科技 | 除甲醛公司-甲醛检测治理-杭州创绿家环保科技有限公司-室内空气净化十大品牌 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 |