Vue父組件如何獲取子組件中的變量

在vue項(xiàng)目日常開(kāi)發(fā)中，難免要把功能性組件抽離出來(lái)，這樣結(jié)構(gòu)就會(huì)出現(xiàn)父子組價(jià)，兄弟組件等，但是這樣就會(huì)涉及到不同組件需要互相使用其中的值得問(wèn)題。

創(chuàng)新互聯(lián)專(zhuān)注于開(kāi)福企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城建設(shè)。開(kāi)福網(wǎng)站建設(shè)公司,為開(kāi)福等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

之前有說(shuō)過(guò)通過(guò)ref來(lái)讓父組件操作子組件，并且傳值，那么我們今天來(lái)詳細(xì)看看。

案例一：點(diǎn)擊父組件的按鈕，操作子組件顯示

注：可以通過(guò)獲取id/class來(lái)操作，這里我就不介紹這種方法了，至于jquery的話，在vue中還是慎用。

介紹：這里通過(guò)給子組件綁定ref屬性，引號(hào)命名自定義，然后父組件通過(guò) this.$refs.名字 就可以操作子組件的元素，以改變它的樣式等。

案列二：獲取子組件data中的變量

介紹：

父組件：

這里通過(guò)給子組件綁定ref屬性，引號(hào)中的命名自定義，然后父組件通過(guò) this.$refs.名字.變量名 就可以獲得子組件中的值

子組件：

好了，以上就是父組件獲取子組件的值并且操作子組件的方法。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。