快捷導(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中provide、inject詳解以及使用教程
provide和inject主要為高階插件/組件庫(kù)提供用例,并不推薦直接用于應(yīng)用程序代碼中,下面這篇文章主要給大家介紹了關(guān)于Vue中provide、inject詳解以及使用的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue中this.$message的實(shí)現(xiàn)過(guò)程詳解
Message在開(kāi)發(fā)中的使用頻率很高，也算是Element-UI組件庫(kù)中比較簡(jiǎn)單的，對(duì)于感興趣的朋友可以一起探討一下Message組件的實(shí)現(xiàn)，本文詳細(xì)介紹了vue中this.$message的實(shí)現(xiàn)過(guò)程，感興趣的同學(xué)可以參考一下
2023-04-04
Vue2+ElementUI表單、Form組件的封裝過(guò)程
在 Vue2 項(xiàng)目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過(guò)程,感興趣的朋友跟隨小編一起看看吧
2024-03-03
Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中，編寫(xiě)組件的方式是使用Options API，它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫(xiě)對(duì)應(yīng)的功能模塊，這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下
2022-10-10
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue-cli-webpack搭建斗魚(yú)直播步驟詳解
斗魚(yú)直播是比較火的直播視頻，想必大家都看過(guò)吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚(yú)直播步驟詳解,需要的朋友可以參考下
2017-11-11
$vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)$
vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)
這篇文章主要介紹了vue項(xiàng)目中字符串換行顯示方式(返回的數(shù)據(jù)包含‘\r\n’字符)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue3.0封裝輪播圖組件的步驟
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
vue中使用file-saver導(dǎo)出文件的全過(guò)程記錄
這篇文章主要給大家介紹了關(guān)于vue中使用file-saver導(dǎo)出文件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02
Vue組件通信的幾種實(shí)現(xiàn)方法
這篇文章主要介紹了Vue組件通信的幾種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04