Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式
一、傳遞數(shù)據(jù)
在要傳遞的組件標簽中配置傳遞信息：
屬性名 = "屬性值"
注意：如果傳遞的屬性值是一個表達式，要使用：屬性名="屬性值" 的形式。
二、接收數(shù)據(jù)
在目標組件中配置props進行數(shù)據(jù)接收：
方式一：直接接收
注意：這里的屬性名和上面?zhèn)鬟f數(shù)據(jù)時配置的屬性名要相同
props:["屬性1", "屬性2"]
方式二：限制類型
可以通過限制類型的方式限制傳遞過來的數(shù)據(jù)類型，放置數(shù)據(jù)出錯:
props:{ 屬性1:類型, 屬性2:類型 }
方式三：所有配置項
完整寫法中我們可以對每一個接收的屬性再進行單獨的配置：
props:{ 屬性1:{ // 配置項 }, 屬性2: { // 配置項 } }有如下配置項：
type // 屬性的數(shù)據(jù)類型 required // 該屬性是否為必填項 default // 若未傳該屬性，設(shè)置默認值
三、注意事項
Vue規(guī)定我們通過props接收過來的屬性不能夠修改。
如果我修改，就會進行控制臺報錯：
那我們?nèi)绻娴南胍獙邮者^來的數(shù)據(jù)進行修改該怎么辦呢？
我們可以配置兩份數(shù)據(jù)，一份是props接收過來的數(shù)據(jù)，一份是組件中data的數(shù)據(jù)，data中的數(shù)據(jù)用于修改。
因為props的優(yōu)先級比data高，所以我們能在data中收到props中的數(shù)據(jù)：
到此這篇關(guān)于Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式的文章就介紹到這了,更多相關(guān)Vue props傳遞數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了IDEA安裝vue插件圖文，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue 中使用 watch 出現(xiàn)了如下的報錯的原因分析
這篇文章主要介紹了vue 中使用 watch 出現(xiàn)了如下的報錯信息的原因分析及解決方法，本文附有代碼解決方案，非常不錯,需要的朋友可以參考下2019-05-05
一步步教你利用webpack如何搭一個vue腳手架（超詳細講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關(guān)資料，文中有超詳細講解和注釋，對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
在使用vue開發(fā)大屏?xí)r,發(fā)現(xiàn)了一個很好用的可視化組件庫DataV,下面這篇文章主要給大家介紹了關(guān)于VUE引入DataV報錯解決的實戰(zhàn)記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
在antd Form表單中select設(shè)置初始值操作
這篇文章主要介紹了在antd Form表單中select設(shè)置初始值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過示例為大家進行了詳細的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
詳解axios 全攻略之基本介紹與使用（GET 與 POST）
本篇文章主要介紹了axios 全攻略之基本介紹與使用（GET 與 POST），詳細的介紹了axios的安裝和使用，還有 GET 與 POST方法，有興趣的可以了解一下2017-09-09
策略模式實現(xiàn) Vue 動態(tài)表單驗證的方法
策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨立的，策略模式根據(jù)輸入來調(diào)整采用哪個算法。這篇文章主要介紹了策略模式實現(xiàn) Vue 動態(tài)表單驗證,需要的朋友可以參考下2019-09-09
這篇文章主要給大家介紹了關(guān)于vue中如何使用$emit傳遞多個參數(shù)的2種方法,在Vue中可以使用$emit方法向父組件傳遞數(shù)據(jù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了Element-ui?Dialog對話框基本使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06