子组件向父传参 .$emit的使用

案例背景:子组件是一个弹出层,点击父组件显示弹出层,子组件按钮控制弹出层的隐藏

父组件:

  • @closeAddress="closeList" 关闭联系人弹框*
  • @showName="linkName" 获取子组件选中的联系人*
    methods:{
         closeList(state){//关闭联系人弹框
             this.addressShow = state;
         },
         linkName(dataList){//  dataList 从子组件获取数据
             let _this = this;
             _this.contactsName = dataList.nameData.join();
             _this.addressShow = dataList.showState;
         }
     }    

子组件:

  • //点击的关闭按钮
  • //点击确定按钮,获取选中的联系人以及关闭弹出层
methods:{
        closeAddress() {
          let state = false;
          this.$emit('closeAddress',state)//closeAddress事件触发后,自动触发closeList事件
        },
        sureBtn(){//确定
             let _this = this
              let dataList = {
                nameData: _this.onTextState,//选中的联系人
                showState: false//点击隐藏
              };
              this.$emit('showName',dataList)//sureBtn事件触发后,自动触发showName里的linkName事件,将dataList传给父组件
        },
}

你可能感兴趣的:(子组件向父传参 .$emit的使用)