一、需求分析：
父组件中点击事件显示出子组件；并且监听子组件内部事件（在父组件中隐藏子组件等操作）。
二、代码
1、父组件【Start】点击事件，显示子组件【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: "启动五谷模式",
titleColor: "pink",
content: "设备已经是启动模式，为了保障安全，请在设备机上点击启动按钮。",
contentColor: "gray",
btn: ["返回", "确定"],
btnColor: ["", ""]
};
this.alertDara = alertDara;
},
alertBackFn: function(data) {
this.alertDara = '';
console.log("点击了取消",data)
},
alertSureFn:function(data){
this.alertDara = '';
console.log("点击了确定",data)
}
[图片上传中...(image.png-3c3c38-1552016390278-0)]
1、selModelFn 事件，改变 'alertDara' 值，显示或隐藏子组件(Public) 。 【1】
2、通过 props 方法向 子组件传参；子组件拿到参数显示对应的内容 。【2】
3、监听子组件事件(alertBackFn)，进而触发父组件事件（alertBackFn），继续下一步操作【3/4】
注：通过 $emit 方法监听子组件事件，'alertBack' 为 emit 的属性名称(自定义)。
props传参详解：https://www.jianshu.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、拿到父组件传的参数，显示子组件相应内容
2、子组件事件：通过eimit子组件向父组件传参：https://www.jianshu.com/p/3f8dff126d90
[图片上传中...(image.png-b03028-1552016030915-0)]
