vue中props將父組件方法傳遞給了什么

這篇文章主要介紹vue中props將父組件方法傳遞給了什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司成立十年來，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、主機(jī)域名、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗(yàn)好、性價比高、打開快等等，這些對于網(wǎng)站建設(shè)都非常重要，創(chuàng)新互聯(lián)公司通過對建站技術(shù)性的掌握、對創(chuàng)意設(shè)計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

在vue中，props將父組件方法（數(shù)據(jù)）傳遞給子組件。父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上，接著子組件用屬性props去接受父組件傳過來的值。

父組件向子組件傳值步驟：

在這里先定義一下，相對本案例來說：App.vue是父組件，Second-module.vue是子組件。

一、首先，值肯定是定義在父組件中的，供所有子組件共享。所以要在父組件的data中定義值：

二、其次，父組件要和子組件有契合點(diǎn)：就是在父組件中調(diào)用、注冊、引用子組件：

調(diào)用：

注冊：

引用：

三、接下來，就可以在父組件和子組件鏈接的地方（即引用子組件的標(biāo)簽上），把父組件的值綁定給子組件：

這里我綁定了兩個值，一個是數(shù)組，一個是字符串。

特別注意：

總的來說父傳子就是這三個步驟：父組件中定義值、調(diào)用子組件并引用、在引用的標(biāo)簽上給子組件傳值。

但是注意是要用 v-bind: 綁定要傳的值，不用v-bind直接把值放到標(biāo)簽上，會被當(dāng)成html的節(jié)點(diǎn)屬性解析的。

四、最后，子組件內(nèi)部肯定要去接受父組件傳過來的值：props（小道具）來接收：

另一種接收方式：這里注意使用字符串包裹，再這里踩了一下坑。

具體的接收方式看官方文檔~

五、這樣，子組件內(nèi)部就可以直接使用父組件的值了。

但是有要注意的點(diǎn)：

子組件接受的父組件的值分為——引用類型和普通類型兩種，

• 普通類型：字符串（String）、數(shù)字（Number）、布爾值（Boolean）、空（Null）

• 引用類型：數(shù)組（Array）、對象（Object）

其中，普通類型是可以在子組件中更改，不會影響其他兄弟子組件內(nèi)同樣調(diào)用的來自父組件的值，

但是，引用類型的值，當(dāng)在子組件中修改后，父組件的也會修改，那么后果就是，其他同樣引用了改值的子組件內(nèi)部的值也會跟著被修改。除非你有特殊的要求這么去做，否則最好不要這么做。

父組件傳給子組件的值，在子組件中千萬不能修改，因其數(shù)據(jù)是公用的，改了所有引用的子組件就都改了。

先看一個效果頁面：

左邊的列表欄是引用父組件值的第一個子組件，右邊是引用了同樣值的第二個子組件，他們都有一樣的信息：

開發(fā)工具中看也是明顯的6條數(shù)據(jù)：

注意對比看最后一條數(shù)據(jù): 點(diǎn)擊右邊區(qū)域第一個藍(lán)色按鈕后，就少了一組數(shù)據(jù)，當(dāng)然是兩邊同時少的。

同樣看開發(fā)工具中，App組件的數(shù)據(jù)是少了一條的。

但是傳遞的是字符串、數(shù)字、布爾值的時候，在一個組件中修改就不會影響到其他組件的信息。就沒有關(guān)系。

我點(diǎn)擊第二個藍(lán)色按鈕，，就只有第二個子組件里的title改變了，第一個的組件沒有變動

嘗試過后，值確實(shí)改了，但是vue給我彈出了一個警告：

警告:避免直接對一個道具進(jìn)行修改，因?yàn)楫?dāng)父組件重新呈現(xiàn)時，該值將被覆蓋。相反，使用基于支柱的數(shù)據(jù)或計算屬性。

官網(wǎng)說法：

以上是“vue中props將父組件方法傳遞給了什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：vue中props將父組件方法傳遞給了什么
路徑分享：http://muchs.cn/article46/ihjceg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、網(wǎng)頁設(shè)計公司、企業(yè)建站、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)