vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn)
其實在vue中實現(xiàn)子組件實時獲取父組件的數(shù)據(jù)有6種方式.
1、props/$emit；
2、子組件向父組件傳值（通過事件形式）；
3、使用vuex；
4、使用$attrs/$listeners;
5、provide/inject；
6、$parent/$children與ref。
上述的六種方式，大家可以自行了解一下，多寫一些就知道怎么使用了。接下來我將介紹，我在項目中使用到的方式：方式一。
項目截圖：
場景：父組件通過實時的改變上述四個變量，并且子組件需要實時的獲取父組件的變量去調(diào)用后端接口獲取數(shù)據(jù)，最后將數(shù)據(jù)渲染到子組件的頁面中。注：如果你的場景和我的很類似，那你也可以使用我的方式。
實現(xiàn)：
1、父組件：父組件只需要在選擇改變上述變量的數(shù)據(jù)中，將數(shù)據(jù)賦值給info變量即可。該info變量子組件獲取就行了。那么我們看看子組件怎么使用props獲取info數(shù)據(jù)的。
2、子組件：在子組件中需要寫一個props去獲取info數(shù)據(jù)。子組件如果還想要實時獲取父組件傳遞的數(shù)據(jù)，那么還需要實現(xiàn)watch監(jiān)聽變量的變化才可以。
props: {
info: {
type: Object,
default: () => ({})
}
},
watch: {
info: {
handler: function (newVal) {
this.newInfo = newVal;
console.log("newinfo",this.newInfo);
},
deep: true
}
},到此這篇關(guān)于vue子組件實時獲取父組件的數(shù)據(jù)實現(xiàn)的文章就介紹到這了,更多相關(guān)vue子組件實時獲取父組件數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
provide和inject主要為高階插件/組件庫提供用例,并不推薦直接用于應(yīng)用程序代碼中,下面這篇文章主要給大家介紹了關(guān)于Vue中provide、inject詳解以及使用的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue中this.$message的實現(xiàn)過程詳解
Message在開發(fā)中的使用頻率很高，也算是Element-UI組件庫中比較簡單的，對于感興趣的朋友可以一起探討一下Message組件的實現(xiàn)，本文詳細介紹了vue中this.$message的實現(xiàn)過程，感興趣的同學(xué)可以參考一下2023-04-04
在 Vue2 項目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中，編寫組件的方式是使用Options API，它的特點是在對應(yīng)的屬性中編寫對應(yīng)的功能模塊，這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10
vue+element-ui+sortable.js實現(xiàn)表格拖拽功能
這篇文章主要為大家詳細介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
斗魚直播是比較火的直播視頻，想必大家都看過吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚直播步驟詳解,需要的朋友可以參考下2017-11-11
vue項目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)
這篇文章主要介紹了vue項目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue中使用file-saver導(dǎo)出文件的全過程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了Vue組件通信的幾種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04