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)文章
VUE的history模式下除了index外其他路由404報錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法，對此有需要的朋友們可以學習下。2019-08-08
這篇文章主要給大家介紹了關(guān)于Vue2父子組件傳值的相關(guān)資料,Vue 2.0 中父子組件之間的傳值可以通過屬性(prop)和事件(event)實現(xiàn),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
vue實現(xiàn)用戶動態(tài)權(quán)限登錄的代碼示例
這篇文章主要介紹了vue如何實現(xiàn)用戶動態(tài)權(quán)限登錄，文中的代碼示例介紹的非常詳細，對大家學習vue有一定的幫助，需要的朋友可以參考閱讀2023-05-05
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Dialog通常是指在Vue.js 3.x版本中使用的對話框組件,它是一個輕量級、易集成的彈窗插件,用于創(chuàng)建通知、確認消息、輸入表單等交互場景,最近項目中遇到了全局掛載Dialog的需求,所以本文給大家介紹了Vue3全局掛載Dialog組件的方法,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了關(guān)于Echarts餅圖圖例太長的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue3中watchEffect和watch的基礎(chǔ)應用詳解
watch是一個偵聽器，默認是懶偵聽的，即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù)，watchEffect是會自動收集函數(shù)里面變量的響應式依賴，本文主要來講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
這篇文章主要介紹了vue3使用echarts并封裝echarts組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js獲取被選擇的option的value和text值方法
今天小編就為大家分享一篇Vue.js獲取被選擇的option的value和text值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08