vue如何通過props方式在子組件中獲取相應(yīng)的對象
更新時間：2022年04月20日 11:20:08 作者：epines
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
這些方法主要是在這次做項目的過程中發(fā)現(xiàn)總結(jié)的來的，感覺也挺常用的，所以就簡單的記錄一下，希望下次不會再犯同樣的錯誤。
子組件定義props，父組件傳入數(shù)據(jù)，子組件在js中獲取的時候使用，如果是在html里面，可以直接把變量渲染上去。
我就直接從代碼上面來進(jìn)行
js代碼：
//子組件中，定義傳入的變量的類型等
props: {
data: {
type: Array,
require: true
},
status: {
type: Boolean,
require: false
}
}我們可以直接在生命周期函數(shù)里面打印props
mounted(){
let _this=this;
console.log(_this._props,9999);
}
方法一
所以就可以直接拿取
mounted() {
? ? ?let _this=this;
? ? ?let {datas,status}=_this._props;
? ? ?console.log(datas,999999);
? ?},方法二
有時候會獲取不到,可以用一個定時器來獲取
? ?mounted() {
? ? ?let _this=this;
? ? ?let {datas,status}=_this._props;
? ? ?setTimeout(()=>{
? ? ? ?console.log(this._props)
? ? ? ?console.log(datas,111111)
? ? ?},2000)
? ?}方法三
深拷貝
? ?mounted() {
? ? ?let _this=this;
? ? ? let props = {..._this._props};
? ? ? console.log(props,"props.......")
? ?},方法四
利用watch監(jiān)聽
//直接監(jiān)聽data，因為這里的props的變量名為data ??
watch:{
? ? ?data(newData,prevData){
? ? ? ?console.log(newData,123654789)
? ? ?}
? ?}
沒錯啊，我的data就是一個數(shù)組。
在這四種方法的逐級使用下，終于獲取到了我想要的data。
其實其他幾種都是可以的，只是不知道為什么在這次項目中的某個地方，前面幾種都失效了，（其他地方是成功的），可能是因為我有毒吧 ╭(╯ε╰)╮。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組寫一個組件,需要的朋友可以參考下2018-04-04
elementUI+Springboot實現(xiàn)導(dǎo)出excel功能的全過程
這篇文章主要介紹了elementUI+Springboot實現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對這個導(dǎo)出功能進(jìn)行一個匯總整理寫出來，結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。這篇文章主要介紹了vue 指定組件緩存,需要的朋友可以參考下2018-04-04
vue展示dicom文件醫(yī)療系統(tǒng)的實現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08
vue-router+vuex addRoutes實現(xiàn)路由動態(tài)加載及菜單動態(tài)加載
本篇文章主要介紹了vue-router+vuex addRoutes實現(xiàn)路由動態(tài)加載及菜單動態(tài)加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vue中項目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue如何循環(huán)提取對象數(shù)組中的值,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue如何進(jìn)行數(shù)據(jù)代理,通過本文學(xué)習(xí)我們了解如何代理的及驗證兩條線的問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
vue實現(xiàn)的上傳圖片到數(shù)據(jù)庫并顯示到頁面功能示例
這篇文章主要介紹了vue實現(xiàn)的上傳圖片到數(shù)據(jù)庫并顯示到頁面功能,結(jié)合實例形式分析了基于vue.js的數(shù)據(jù)庫操作及頁面圖片顯示相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
這篇文章主要為大家介紹了Vue多重文字描邊組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06