vue父組件控制子組件顯示隱藏的問題

在一個項目中有一個主頁面，一個彈層，現(xiàn)在我把它們做成了父組件與子組件，點擊父組件中的“顯示彈層”按鈕則popup子組件顯示，如下圖：
圖片描述

父組件代碼如下：

<template>
    <div class="parent">
        <button @click="showPanel">顯示彈窗</button>
        <v-popup v-show="panelShow" :panelShow="panelShow"></v-popup>
    </div>
</template>

export default {
    data() {
        return {
            panelShow: false
        }
    },
    methods: {
        showPanel() {
          this.panelShow = true;
        }
    },
    components: {
      'v-popup': Popup
    }
}

現(xiàn)在父組件能夠操控彈窗是否顯示。但在popup組件中也有一個關(guān)閉彈窗的按鈕，我想修改父組件中的panelShow變量來控制彈窗的隱藏，popup組件代碼如下：

<div class="popup">
    <button @click="hidePanel">關(guān)閉彈窗</button>
</div>

export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
            //這里應(yīng)該怎么修改父組件的值呢?這段代碼會報錯，
            //提示子組件不能修改父組件的值
            //this.panelShow = false;  ?
        }
    }
}

我用的是vue2.5，請問這種修改父組件變量的思路對嗎？或者這種場景有其他更好的解決方案？
麻煩各位大佬指點，謝謝了~

回答

編輯回答

怪痞

辦法很多，
1.可以用事件，點擊按鈕的時候觸發(fā)一個事件，通知父組件
2.可以在模版里用slot 把按扭的html寫在父親組件里
3.用v-modal (其實實現(xiàn)的方法就是第一種方式，但是可以少寫很多代碼）

2018年7月15日 13:40

編輯回答

不歸路

可以用 .sync 來實現(xiàn)一個雙向綁定，具體實現(xiàn)如下：

在父組件的模板上：

<template>
    <div class="parent">
        <button @click="showPanel">顯示彈窗</button>
        // 把顯示隱藏扔給子組件處理，即 v-show 放到子組件上
        // <v-popup v-show="panelShow" :panelShow="panelShow"></v-popup>
        <v-popup :panelShow.sync="panelShow"></v-popup>
    </div>
</template>

子組件的代碼：

<template>
    // 在這里控制顯示隱藏
    <div v-show="panelShow" class="popup">
        <button @click="hidePanel">關(guān)閉彈窗</button>
    </div>
</template>

<script>
export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
            // 下面的語句配合開頭寫的 .sync 就會更新父組件中的 panelShow 變量
            this.$emit('update:panelShow', false)
        }
    }
}
</script>

最后，在子組件對外提供的 api 設(shè)計上，建議把 showPanel 這個 prop 名稱改成 visible，感覺會更直觀，這方面可以參考下 element-ui 的 el-dialog

2018年9月21日 19:10

編輯回答

風(fēng)清揚

我對vue不太熟，一般采用屬性傳遞的方式：
1，比如彈層組件有一個show屬性；
2，父組件控制子組件的show屬性,或者調(diào)用子組件的show()方法；
3，子組件控制自己的show屬性,或者提供自己的組件方法供父調(diào)用。

2018年2月8日 21:12

編輯回答

胭脂淚

這么寫的話耦合性太高，組件不應(yīng)該包含太多業(yè)務(wù)邏輯，比較合理的是當(dāng)你點擊關(guān)閉按鈕的時候，你告訴外界你已經(jīng)點了關(guān)閉按鈕，外界收到了消息，再執(zhí)行相應(yīng)的操作(關(guān)閉彈窗)。

// popup組件
hidePanel() {
   this.$eimt('clickedHidePanel');
}

// 父組件
<template>
  <v-popup @hidePanel=hidePanel v-show="panelShow" :panelShow="panelShow"></v-popup>
</template>

// methods增加相應(yīng)的方法
hidePanel () {
    this.panelShow = false;
}

如果你覺得這種方法太麻煩的話，也可以按照你的思路，使用this.$parent這個api就可以了（不過不建議，還是推薦上面的，比較符合組件的思想）。

2017年12月12日 09:25