一、需求分析：

父組件中點(diǎn)擊事件顯示出子組件；并且監(jiān)聽(tīng)子組件內(nèi)部事件（在父組件中隱藏子組件等操作）。

二、代碼

1、父組件【Start】點(diǎn)擊事件，顯示子組件【Public】 （props方法）

父組件代碼【Srart】：

<li class="flex-con sel" @click="selModelFn(1)">蔬果</li>

<public v-if="alertDara"   -------------------------------【1】
    :alertDara="alertDara"   -----------------------------【2】
    @alertBack="alertBackFn"    --------------------------【3】
    @alertSure="alertSureFn"   ---------------------------【4】
></public>  

image.png

事件

    selModelFn: function(v) {
      console.log(v);
      // 彈框樣式
      var alertDara = {
        title: "啟動(dòng)五谷模式",
        titleColor: "pink",
        content: "設(shè)備已經(jīng)是啟動(dòng)模式，為了保障安全，請(qǐng)?jiān)谠O(shè)備機(jī)上點(diǎn)擊啟動(dòng)按鈕。",
        contentColor: "gray",
        btn: ["返回", "確定"],
        btnColor: ["", ""]
      };

      this.alertDara = alertDara;
    },


    alertBackFn: function(data) {
      this.alertDara = '';
      console.log("點(diǎn)擊了取消",data)
    },
    alertSureFn:function(data){
       this.alertDara = '';
      console.log("點(diǎn)擊了確定",data)
    }

[圖片上傳中...(image.png-3c3c38-1552016390278-0)]

1、selModelFn 事件，改變 'alertDara' 值，顯示或隱藏子組件(Public) 。 【1】
2、通過(guò) props 方法向 子組件傳參；子組件拿到參數(shù)顯示對(duì)應(yīng)的內(nèi)容 。【2】
3、監(jiān)聽(tīng)子組件事件(alertBackFn)，進(jìn)而觸發(fā)父組件事件（alertBackFn），繼續(xù)下一步操作【3/4】
注：通過(guò) $emit 方法監(jiān)聽(tīng)子組件事件，'alertBack' 為 emit 的屬性名稱(chēng)(自定義)。
props傳參詳解：http://www.itdecent.cn/p/d0cc6eb0226e

子組件代碼：

<div
  class="btn-back flex-con"
  v-if="alertDara.btn[0]"
  :style="{color:alertDara.btnColor[0]}"
  @click="alertBackFn"
>{{alertDara.btn[0]}}</div>

[圖片上傳中...(image.png-672b02-1552016063700-0)]

事件

    props:['alertDara'],     --------------------------------------- 【1】

    alertBackFn:function(){  --------------------------------------- 【2】
      this.$emit('alertBack', '這是子組件傳遞的消息');
    },
    alertSureFn:function(){

      this.$emit('alertBack', '這是子組件傳遞的消息');
    }

image.png

1、拿到父組件傳的參數(shù)，顯示子組件相應(yīng)內(nèi)容
2、子組件事件：通過(guò) eimit子組件向父組件傳參：http://www.itdecent.cn/p/3f8dff126d90
[圖片上傳中...(image.png-b03028-1552016030915-0)]

gitHub： https://github.com/caoguoli/vue-maskALert