快捷導(dǎo)航

vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)

更新時(shí)間：2023年12月25日 11:52:03 作者：香蕉鈦合金

本文主要介紹了vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

其實(shí)在vue中實(shí)現(xiàn)子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)有6種方式.

1、props/$emit；

2、子組件向父組件傳值（通過(guò)事件形式）；

3、使用vuex；

4、使用$attrs/$listeners;

5、provide/inject；

6、$parent/$children與ref。

上述的六種方式，大家可以自行了解一下，多寫(xiě)一些就知道怎么使用了。接下來(lái)我將介紹，我在項(xiàng)目中使用到的方式：方式一。

項(xiàng)目截圖：

場(chǎng)景：父組件通過(guò)實(shí)時(shí)的改變上述四個(gè)變量，并且子組件需要實(shí)時(shí)的獲取父組件的變量去調(diào)用后端接口獲取數(shù)據(jù)，最后將數(shù)據(jù)渲染到子組件的頁(yè)面中。注：如果你的場(chǎng)景和我的很類(lèi)似，那你也可以使用我的方式。

實(shí)現(xiàn)：

1、父組件：父組件只需要在選擇改變上述變量的數(shù)據(jù)中，將數(shù)據(jù)賦值給info變量即可。該info變量子組件獲取就行了。那么我們看看子組件怎么使用props獲取info數(shù)據(jù)的。

2、子組件：在子組件中需要寫(xiě)一個(gè)props去獲取info數(shù)據(jù)。子組件如果還想要實(shí)時(shí)獲取父組件傳遞的數(shù)據(jù)，那么還需要實(shí)現(xiàn)watch監(jiān)聽(tīng)變量的變化才可以。

props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    info: {
      handler: function (newVal) {
        this.newInfo = newVal;
        console.log("newinfo",this.newInfo);
      },
      deep: true
    }
  },

到此這篇關(guān)于vue子組件實(shí)時(shí)獲取父組件的數(shù)據(jù)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue子組件實(shí)時(shí)獲取父組件數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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