子组件跳转父组件

描述:父组件Form.vue 点击关联,弹出子组件importForm.vue 选中一条数据之后,点击确定按钮,关闭子组件importForm.vue,将子组件的内容显示在父组件Form.vue中子组件跳转父组件_第1张图片

选中第一条数据,点击确定

子组件跳转父组件_第2张图片

                                                父组件对应的工作内容就有了

子组件跳转父组件_第3张图片

 父组件

父组件跳转子组件

 this.$refs.子组件.子组件中的方法的方法名(父组件给子组件方法传的参数)


/**
     * 弹出线路申请单关联界面
     */
    openAppForm() {
      // this.dataForm.LineAppFormId='';
      this.appFormVisible = true;
      this.$nextTick(() => {
        this.$refs.APPForm.sendParam(this.dataForm.LineAppFormId)
      })
    },


import APPForm from './appForm'

export default {
  components: { APPForm, },

}


    /**
     * 勾选中的数据进行表单赋值
     */
    assignMent(param) {
      console.log('关联线路申请单关闭',param)
      this.appFormVisible = false;
      //线路申请单id
      this.dataForm.LineAppFormId = param.id;
      //工作内容
      this.dataForm.workContent = param.workContent;
    },
      hiddenAppForm(){
      this.appFormVisible = false;
    },

子组件

子组件给父组件

this.$emit('父组件中方法的方法名', 子组件给父组件传的参数);
 sendParam(id) {
            if (id != null && id != '') {
                this.checkedId = id;
            }
        },
        /**
         * 列表复选框选中change事件
         * @author fuzibo
         * @date 2023-03-08
         * @copyright 上海柒志科技有限公司
         */
        handleSelectionChange(val) {
            this.recordData = '';
            this.recordLenth = val.length;
            if (val.length > 1) {
                this.$message({
                    message: '只能关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            //记录勾选的数据
            this.recordData = val[0];
            console.log('勾选的数据为>>>', val)
        },

        //确定关联线路申请单
        dataFormSubmit() {
            if (this.recordLenth > 1 || this.recordLenth == '') {
                this.$message({
                    message: '请关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            this.visible = false;
            let data = this.recordData;
            //调用父组件进行传值
            this.$emit('assignMent', data);

        },


你可能感兴趣的:(vue.js,elementui,javascript)