02.4 - vue 组件传参,监听子组件事件

一、需求分析：

父组件中点击事件显示出子组件；并且监听子组件内部事件（在父组件中隐藏子组件等操作）。

---

二、代码

1、父组件【Start】点击事件，显示子组件【Public】 （props方法）

父组件代码【Srart】：

蔬果

  

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

子组件代码：

{{alertDara.btn[0]}}

[图片上传中...(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)]

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