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

發(fā)布時(shí)間：2020-10-13 16:00:56 來源：腳本之家閱讀：258 作者：壞丶毛病欄目：web開發(fā)

在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>

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

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

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽