vue組件傳值有幾種方法-tft每日頭條

vue組件傳值有幾種方法

生活更新时间:2024-09-17 23:54:40

數據從後端獲取過來，最外層的父組件接收數據，子組件不能直接獲取，必須由父組件傳遞，此時使用props，并且父組件的值更新後，子組件的值也會随之更新，但是反過來通過修改子組件props來影響父組件是不行的。但是子組件可以通過$emit觸發父組件的自定義事件來進行傳值。

一、props

props用于父組件向子組件傳值，在 vue組件基礎之創建與使用中使用了一個實例，這裡還是如此，假如一個頁面包含頭部、内容、尾部三個部分，這是三個組件，而它們的父組件是App.vue組件。

vue組件傳值有幾種方法（vue組件基礎之父子傳值）1

現在父組件App.vue将數據傳遞到Vcontent.vue組件中，有三個步驟：

父組件中從後台獲取數據
在父組件中使用的子組件綁定自定義屬性
在子組件中驗證傳遞數據的類型
在子組件中渲染數據

1、獲取數據

現在假設已經從後台獲取到了數據，父組件中已經有數據。

vue組件傳值有幾種方法（vue組件基礎之父子傳值）2

2、綁定自定義屬性

在父組件中使用子組件（Vcontent），給子組件綁定自定義屬性。

vue組件傳值有幾種方法（vue組件基礎之父子傳值）3

3、在子組件中驗證數據類型

向将要傳遞的子組件中驗證傳遞的數據類型，數據類型有很多種，根據自己寫的數據類型填寫：

String Number Boolean Array Object Date Function Symbol

vue組件傳值有幾種方法（vue組件基礎之父子傳值）4

4、渲染數據

此時可以在子組件中使用傳遞過來的數據了。

vue組件傳值有幾種方法（vue組件基礎之父子傳值）5

二、自定義事件

用于子組件向父組件傳值，假設現在Vcontent組件中通過頁面添加了一條數據，此時就需要

在父組件中自定義事件
在子組件中觸發父組件中自定義事件

1、父組件自定義事件

vue組件傳值有幾種方法（vue組件基礎之父子傳值）6

2、觸發自定義事件

事件綁定到Vcontent組件上，那麼在對應的組件中來進行觸發，使用this.$emit方法進行觸發。

vue組件傳值有幾種方法（vue組件基礎之父子傳值）7

總結：

父組件-----》子組件傳值使用props
子組件-----》父組件傳值使用this.emit

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活思南河道治理
思南河道治理?本報訊(李暢)近年來，思南縣始終牢固樹立綠水青山就是金山銀山的理念,全面落實中央和省、市河長制工作各項決策部署，全縣河流生态呈現出水清、河暢、岸綠、景美的良好局面，下面我們就來說一說關于思南河道治理?我們一起去了解并探讨一下這... 2023-03-29
生活乳膠床上可以直接鋪電熱毯嗎
電熱毯是很常見的取暖設備，很多人在秋冬季節都喜歡使用電熱毯。如果家裡使用的乳膠床墊，擔心用電熱毯後把床墊搞壞的話其實是不要緊的，電熱毯并不會對乳膠床墊造成危害，具體可以看看下面的介紹吧！一、電熱毯可以用在乳膠床墊上嗎可以。電熱毯是可以直接放... 2023-03-26
生活詩經召南全文
詩經召南全文?維鵲有巢，維鸠居之之子于歸，百兩禦之，今天小編就來說說關于詩經召南全文?下面更多詳細答案一起來看看吧!詩經召南全文維鵲有巢，維鸠居之。之子于歸，百兩禦之。維鵲有巢，維鸠方之。之子于歸，百兩将之。維鵲有巢，維鸠盈之。之子于歸，百... 2023-04-03
生活種植太子參應該怎麼平衡施肥
青錢柳；太子參具體高産栽培管理技術措施1選種；一般在留種地内一邊挖，一邊選種，将芽頭完整、參體粗壯、整齊無傷、無病蟲危害的黃色塊根作種用，以扶廂藥種為宜。2.選地及整地施肥；2.1選地；太子參在選擇土地時，應選中、低山及丘陵地，地勢相對較高... 2022-11-29
生活黴豆腐制作和發黴步驟圖
随着生活水平的不斷提升，人們對于美食的追求也是越來越鄉村化，基本上現在很多城市家庭都會自制一些農村常見小吃，比如腌泡菜，腌鹹鴨蛋，腌臘肉等等，這樣制作出來的食物不僅比外面賣的衛生安全，而且價格也是更加的實惠，那麼今天小編就來給大家講解下農村... 2023-03-07
生活最新拖把最好用又幹淨
三年扔了10多把拖把，沒有人比我更有發言權了，先上結論：免手洗平闆拖把好用。下面說說我之所以推免手洗平闆的三點原因：1.從拖地接觸面上講，平闆拖把秒殺一切膠棉和旋轉拖把以及棉布條拖把，與地面貼合度非常高，可以将地面毛絮污垢輕松帶起。2.從使... 2022-11-04
生活如何在coreldraw快速做圖
CorelDRAW軟件簡介CorelDRAW是一款由Corel公司推出的全新的适用于專業圖形編輯工作者使用的矢量圖形設計軟件，CorelDRAW®GraphicsSuite。是配備齊全的專業設計工具包，可以非常高的效率提供令人驚豔的矢量插圖... 2023-02-20
生活言情大綱
言情大綱?丁香——一念錯傷，咫尺天涯，空留丁香，人獨惋，我來為大家科普一下關于言情大綱?下面希望有你要的答案，我們一起來看看吧!言情大綱丁香——一念錯傷，咫尺天涯，空留丁香，人獨惋。（一）夜已黑。“店家……酒！”“這位姑娘，你不能再喝了。”... 2023-03-26
生活流芳百世是什麼意思
流芳百世是什麼意思?流芳百世釋義：流：流傳芳：花草的香氣，比喻好的名聲百世：古人以三十年為一世，百世形容極為久遠的時間美好的名聲在後世永遠流傳也作“流芳千古”，下面我們就來聊聊關于流芳百世是什麼意思?接下來我們就一起去了解一下吧!流芳百世是... 2022-06-12
生活智能鎖這麼火小白該怎麼選
#頭條創作挑戰賽#智能鎖，現在可以說是火得一塌糊塗。但是，很多朋友都反映智能鎖的水很深。看得眼花缭亂，卻不知道怎麼選。目前市場上的智能鎖包含了指紋解鎖，遠程解鎖，密碼解鎖等等。有各種各樣的品牌，真的想選到合适的，的确有點困難。所以在這篇文章... 2023-03-15
生活星期六英文縮寫
星期六英文縮寫?星期六:Saturday縮寫Sat.Saturday，英文單詞，名詞，作名詞時意為“星期六”，今天小編就來聊一聊關于星期六英文縮寫?接下來我們就一起去研究一下吧!星期六英文縮寫星期六:Saturday縮寫Sat.Saturd... 2022-06-16
生活楊帆和朱迅是什麼關系
第六期的主題是春晚金曲，說到春晚想必每個人都不陌生，它仿佛是血液流淌在我們身體的每一處，過年不僅是吃團圓飯，每個人更期盼的是春晚的開始，有春晚這個年才算是完整的。此次星光大道超級版舞台來了一位非常帥氣的主持人楊帆，這期的節目由央視著名主持人... 2023-03-20
生活古典詩意的女孩名
, 2022-12-25
生活 cad基礎教程
cad基礎教程?為繪圖命令窗口，在窗口位置中，點擊要繪制圖形的命令，進行繪制即可，将鼠标放置在命令上，會有相應的命令介紹，我來為大家科普一下關于cad基礎教程?以下内容希望對你有幫助!cad基礎教程為繪圖命令窗口，在窗口位置中，點擊要繪制圖... 2022-07-21
生活如何養成良好的學習習慣
習慣，指積久養成的生活方式。學習習慣，也稱studyinghabbits，是在學習過程中經過反複練習形成并發展，成為一種個體需要的自動化學習行為方式。養成良好的學習習慣，有利于激發學生學習的積極性和主動性;有利于形成學習策略，提高學習效率;... 2022-10-26
生活豇豆焖茄子做法步驟
豇豆焖茄子做法步驟?茄子2個，豇豆1小把，小蔥2根，幹辣椒3粒，生姜片4片，大蒜子5粒，蚝油1茶匙，生抽2茶匙，老抽二分之一茶匙，白糖二分之一茶匙，蝦皮1小撮，食鹽根據個人口（可以不放），我來為大家科普一下關于豇豆焖茄子做法步驟?以下内容希... 2022-06-16
生活涼山移風易俗條例
涼山移風易俗條例?來源：【四川日報-川觀新聞】川觀新聞記者何勤華，現在小編就來說說關于涼山移風易俗條例?下面内容希望能幫助到你，我們來一起看看吧!涼山移風易俗條例來源：【四川日報-川觀新聞】川觀新聞記者何勤華近日，涼山彜族自治州越西縣闆橋鎮... 2023-02-08
生活蚯蚓跛腳
蚯蚓跛腳?，今天小編就來說說關于蚯蚓跛腳?下面更多詳細答案一起來看看吧!蚯蚓跛腳全片最渣賤那個前輩，一出現就各種誇獎，什麼高富帥天才我完全沒看出來這小眼睛土男有什麼帥的果然沒多久就渣男本性了。有女朋友還勾引女主，女主有些角度有點大臉版金泰熙... 2023-03-11
生活衡水體英文26個字母詳細教程
圖示集‖英語詞彙表之初中詞彙表圖示集‖關聯英語詞彙記憶圖示集‖English詞彙記憶之簡單詞詞根詞綴圖示集‖English詞彙記憶之詞根詞綴附錄圖示集‖English詞彙記憶之前綴圖示集‖English詞彙記憶之後綴圖示集‖English詞... 2023-03-12
生活中國四大名山
中國四大名山?中國佛教四大名山：五台山，位于山西省五台縣，文殊菩薩的道場，現在小編就來說說關于中國四大名山?下面内容希望能幫助到你，我們來一起看看吧!中國四大名山中國佛教四大名山：五台山，位于山西省五台縣，文殊菩薩的道場。峨眉山，位于四川省... 2022-06-14
生活男女相處久了為什麼會日久生情
文丨桃小菁春風十裡不如你，小菁在這裡，等着你！Partone男女之間的感情有兩種，一種是一見鐘情，一種是日久生情。很多人不相信一見鐘情，一方面是因為一見鐘情的情況很少出現，另一方面也是因為大家覺得，一見鐘情不過隻是見色起意。相比于一見鐘情，... 2022-11-29
生活蘋果ios14.3淺色壁紙
文|明美無限回首往事總是惆怅過多，不管是人或是産品都是需要向前看的。就拿現在的蘋果公司的iOS系統一樣以及蘋果公司的下一代iPhone，現在種種現象曝光表明蘋果公司所謂的iPhone9估計就會在本月也就是四月份與廣大的果粉們真正見面了。不過... 2023-02-09
生活晚春古詩
晚春古詩?原文作者：韓愈，下面我們就來聊聊關于晚春古詩?接下來我們就一起去了解一下吧!晚春古詩原文作者：韓愈草樹知春不久歸，百般紅紫鬥芳菲。楊花榆莢無才思，惟解漫天作雪飛。譯文花草樹木知道春天即将歸去，都想留住春天的腳步，竟相争妍鬥豔。就連... 2022-06-28
生活中年女子作案12起
“希望你出去後，找一份工作，靠自己的勞動或學些有助于生活的技能，自食其力，做一個有責任與擔當的人，慎交朋友，做一個遵紀守法的人......”這是老師對學生的教導還是父母對孩子的叮囑？6月5日上午，博白縣人民法院家事與少年刑事審判庭審理了未成... 2023-01-20
生活怎麼畫海洋動物一百種
作為各位“光輝”的爸爸媽媽來說，在孩子面前常常是無所不能的，不過再怎麼厲害的家長也不可能樣樣都會，當孩子問：“爸爸，小海豚要怎麼畫？”作為一個繪畫水平還停留在幼兒園的家長來說，這可太難了！别着急，果果來幫幫你！今天就帶來0基礎都會的海洋動物... 2023-03-22
生活西遊記人物系列解析
假如孫悟空的屬性是謹慎的，那麼在菩提祖師往他腦袋上敲三下的時候，他斷不敢三更去找師父......屬性是指事物本身所固有的性質。是物質必然的、基本的、不可分離的特性，又是事物某個方面“質”的表現。每個人都有每個人的屬性。孫悟空和菩提祖師舉個例... 2022-12-09
生活禁止出國展出的國寶級文物
國家禁止出境展覽的一級文物——伯矩鬲（标題照片，文物形狀有所變化）。今天，在秦始皇帝陵博物院陳列大廳“幽燕長歌——燕國曆史文化展”上，記者親眼看到了一件我國禁止出境展覽的國寶級文物，它的名字叫“伯矩鬲”，它還有一個雅号叫“牛頭紋帶蓋伯矩鬲”... 2023-03-20
生活鮮松茸怎麼制成幹
赤松茸是生長在赤松樹木根部,與樹根共生的一種野生食用菌。學名大球蓋菇，費用隻有松茸的十分之一。赤松茸營養價值豐富，而且有美味的口感因此受到很多人的喜愛。所以，會有很多人都買一些赤松茸回家做着吃。隻是，如果一次買了太多的赤松茸的話，赤松茸要不... 2023-02-02
生活贊歌誰唱的最好
【我心中最贊的歌手】那一年周傑倫出道，我們的青春才剛剛開始文/印乘01楊俊榮說，這個年輕人，在我們老了以後，他沒有成為一個傳奇，那是我的責任。讓他說出這句話的，就是周傑倫。十多年的青春，十多年的懵懂，都随着時光慢慢的消散，唯有那一段校園的青... 2022-10-25
生活濟甯高職單招學費
記者劉凱平2022年山東高考志願填報正在進行中，7月23日，2022山東（濟甯）高考招生咨詢會高職（專科）場也将在濟甯體育中心（鳥巢）拉開帷幕，考生和家長可在現場咨詢志願填報的相關情況。專科志願填報有難度家長考生可現場問招專科志願怎麼選非常... 2023-02-18

tft每日頭條

> 生活

> vue組件傳值有幾種方法

vue組件傳值有幾種方法

相关生活资讯推荐

热门生活资讯推荐

网友关注