快捷導(dǎo)航

vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象

更新時(shí)間：2022年04月20日 11:20:08 作者：epines

這篇文章主要介紹了vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

方法一

所以就可以直接拿取

mounted() {
? ? ?let _this=this;
? ? ?let {datas,status}=_this._props;
? ? ?console.log(datas,999999);
? ?},

方法二

有時(shí)候會(huì)獲取不到,可以用一個(gè)定時(shí)器來(lái)獲取

? ?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，因?yàn)檫@里的props的變量名為data ??
watch:{
? ? ?data(newData,prevData){
? ? ? ?console.log(newData,123654789)
? ? ?}
? ?}

沒錯(cuò)啊，我的data就是一個(gè)數(shù)組。

在這四種方法的逐級(jí)使用下，終于獲取到了我想要的data。

其實(shí)其他幾種都是可以的，只是不知道為什么在這次項(xiàng)目中的某個(gè)地方，前面幾種都失效了，（其他地方是成功的），可能是因?yàn)槲矣卸景?╭(╯ε╰)╮。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue data引入本地圖片的兩種方式小結(jié)
今天小編就為大家分享一篇vue data引入本地圖片的兩種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
vue實(shí)現(xiàn)樹形表格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
vue計(jì)算屬性時(shí)v-for處理數(shù)組時(shí)遇到的一個(gè)bug問(wèn)題
這篇文章主要介紹了在做vue計(jì)算屬性，v-for處理數(shù)組時(shí)遇到的一個(gè)bug 問(wèn)題,需要的朋友可以參考下
2018-01-01
el-popover如何通過(guò)js手動(dòng)控制彈出框顯示、隱藏
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過(guò)js手動(dòng)控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下
2023-12-12
vue3?實(shí)現(xiàn)右鍵菜單編輯復(fù)制粘貼功能
在瀏覽器中,Vue3編輯器自帶默認(rèn)右鍵菜單,然而,在Electron桌面應(yīng)用中,這一功能需自行編寫代碼實(shí)現(xiàn),本文詳細(xì)介紹了如何在Vue3中手動(dòng)實(shí)現(xiàn)右鍵菜單的編輯、復(fù)制、粘貼功能,并提供了代碼示例,更多細(xì)節(jié)和相關(guān)教程可參考腳本之家的其他文章
2024-10-10
詳解vue 組件的實(shí)現(xiàn)原理
這篇文章主要介紹了詳解vue 組件的實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-11-11
在Vue中使用antv的示例代碼
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過(guò)程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)只能輸入數(shù)字的輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會(huì)影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間,也會(huì)影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過(guò)的可以優(yōu)化webpack的配置,需要的朋友可以參考下
2024-05-05