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

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

//控制彈窗的顯示隱藏
<div v-show="showPopup">
? ? ?<!-- 關閉按鈕，點擊直接將showPopup定義為false-->
? ? ? <div class="closePopup" @click="showPopup = false"></div>
? ? ? <!-- 老師數(shù)量 -->
? ? ? //通過判斷type值控制顯示哪個彈窗內容
? ? ? <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ā)中，難免要把功能性組件抽離出來，這樣結構就會出現(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>

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: