国产精品地址,亚洲一线午夜福利

腳本之家服務器常用軟件

快捷導航

vue實現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀?/h1>

更新時間：2022年03月31日 09:22:31 作者：mini74

這篇文章主要介紹了vue實現(xiàn)父組件獲取子組件的方法或?qū)傩灾翟斀?，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

父組件獲取子組件方法或?qū)傩灾?/h2>
vue的本質(zhì)就是每一塊只負責自己這一塊的工作，這樣更容易維護。

這里主要使用了vue的$ref

當用在一般的標簽上時，主要功能是獲取dom節(jié)點，進行一些dom的操作。
當使用在子組件上，可以用來獲取子組件的屬性。

那么下面我們要實現(xiàn)的就是如何在父組件上使用子組件的方法

目標：我需要實現(xiàn)一個在父組件上控制子組件的彈窗顯示，并且通過參數(shù)判斷顯示哪一個內(nèi)容。

首先我們很容易想到就是綁定一個點擊事件，并且攜帶一個參數(shù)，并且獲取子組件的屬性，這樣在這個父組件中我并沒有控制子組件的開關(guān)，只是我獲取了子組件的方法或者屬性，讓子組件自己控制開關(guān)。

//這里是子組件
<popup ?ref="popup"></popup>
//綁定點擊事件，并且攜帶參數(shù)
<div class="item-box" @click="showPop('teacher')">
//定義點擊事件
showPop(event) {
//獲取子組件的屬性/方法，這里是獲取popup子組件的show方法，并且攜帶參數(shù)
?? ?this.$refs.popup.show(event);
},

在子組件中就需要定義方法，控制顯示彈窗內(nèi)容，并且將傳遞過來的參數(shù)保存

//控制彈窗的顯示隱藏
<div v-show="showPopup">
? ? ?<!-- 關(guān)閉按鈕，點擊直接將showPopup定義為false-->
? ? ? <div class="closePopup" @click="showPopup = false"></div>
? ? ? <!-- 老師數(shù)量 -->
? ? ? //通過判斷type值控制顯示哪個彈窗內(nèi)容
? ? ? <teacher v-if="type =='teacher'"></teacher>
? ? ? <student v-else-if="type =='student'"></student>
? ? ? <turnover v-else></turnover>
</div>

//在data中定義默認值
data(){
? ? ?return {
? ? ? ? ? showPopup: false,
? ? ? ? ? type: ''
? ? ? }
? },
//最后在methods中定義show方法，控制彈窗的顯示
methods:{
? ?show(type){
? ? ? ? this.type = type
? ? ? ? this.showPopup = true;
? ? }
}

這樣就完成了，每個組件只負責我自己需要做的事情，不會影響到其他組件，這樣更易于維護。

父組件獲取子組件中的變量

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

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

案例一：點擊父組件的按鈕，操作子組件顯示

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

介紹：這里通過給子組件綁定ref屬性，引號命名自定義，然后父組件通過 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: {
? ? ? ? ? ? // 點擊新增按鈕，彈出新增數(shù)據(jù)源的彈框
? ? ? ? ? ? addDbSource(){
? ? ? ? ? ? ? ? this.$refs.addAlert.$el.style.display = "block";
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>

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

父組件：

這里通過給子組件綁定ref屬性，引號中的命名自定義，然后父組件通過 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īng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: