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

更新時(shí)間：2019年07月24日 12:04:19 作者：壞丶毛病

這篇文章主要為大家詳細(xì)介紹了Vue父組件如何獲取子組件中的變量，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

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

<template>
 <div class="DbSource-box">
 <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">新增</el-button>
 <db-source-add ref="addAlert" v-on:init="init"></db-source-add>
 </div>
</template>
 
<script>
 import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd";
 export default {
 name: "DbSourceManager",
 components: {DbSourceAdd},
 methods: {
  // 點(diǎn)擊新增按鈕，彈出新增數(shù)據(jù)源的彈框
  addDbSource(){
  this.$refs.addAlert.$el.style.display = "block";
  },
 }
 }
</script>

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

介紹：

父組件：

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

<template>
 <div class="DbSource-box">
 <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">批量刪除</el-button>
 <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table>
 </div>
</template>
 
<script>
 import DbSourceTable from "../components/DbSourceManager/DbSourceTable";
 export default {
 name: "DbSourceManager",
 components: {DbSourceTable},
 methods: {
  // 刪除選中的數(shù)據(jù)源（批量刪除）
  deleteSelectDbSource(){
  console.log(this.$refs.getSelectData.multipleSelection)
  },
 }
 }
</script>

子組件：

<template>
 <div class="table-box">
 
 </div>
</template>
 
<script>
 export default {
 name: "DbSourceTable",
 props:["Data"],
 data(){
  return {
  multipleSelection:[],
  pagesize: 3,
  currpage: 1,
  currId:""
  }
 }
</script>

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider）
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
Vue Mixins混入介紹與使用
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2023-02-02
Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js，并加載glb、gltf、FBX、json模型,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
VSCode創(chuàng)建Vue項(xiàng)目的完整步驟教程
Vue是一個(gè)輕量級(jí)、漸進(jìn)式的Javascript框架,如果想要要開發(fā)全新的Vue項(xiàng)目,建議項(xiàng)目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項(xiàng)目的完整步驟,需要的朋友可以參考下
2022-06-06
vue實(shí)現(xiàn)價(jià)格日歷效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)價(jià)格日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
vue?element-ui的el-input-number默認(rèn)值設(shè)置為空方法
這篇文章主要給大家介紹了關(guān)于vue?element-ui的el-input-number默認(rèn)值設(shè)置為空的相關(guān)資料,el-input-number組件是Element?UI非常常用的一個(gè)數(shù)字輸入框組件,它提供了默認(rèn)值設(shè)置的選項(xiàng),需要的朋友可以參考下
2023-08-08
如何解決ElementPlus的el-table底白線問題
這篇文章主要介紹了如何解決ElementPlus的el-table底白線問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
如何重置vue打印變量的顯示方式
這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧。
2017-12-12
Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)帶參數(shù)的自定義指令示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
Vue3中的模板語法和vue指令
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08