一蔑担、需求分析：
父組件中點(diǎn)擊事件顯示出子組件身诺；并且監(jiān)聽子組件內(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误证、通過 props 方法向 子組件傳參继薛；子組件拿到參數(shù)顯示對(duì)應(yīng)的內(nèi)容 ∮保【2】
3遏考、監(jiān)聽子組件事件(alertBackFn)，進(jìn)而觸發(fā)父組件事件（alertBackFn）蓝谨，繼續(xù)下一步操作【3/4】
注：通過 $emit 方法監(jiān)聽子組件事件灌具，'alertBack' 為 emit 的屬性名稱(自定義)。
props傳參詳解：http://www.reibang.com/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、子組件事件：通過eimit子組件向父組件傳參：http://www.reibang.com/p/3f8dff126d90
[圖片上傳中...(image.png-b03028-1552016030915-0)]
