vue父与子之间的传参【弹框案例】

父传子

index.vue 父组件 props传给子

html

<el-button @click="editClientClick()"  type="text" icon="el-icon-edit" size="small"></el-button>

 <edit-client :dialogEditVisible="dialogEditVisible"  @closeModal="changeDialogVisible"></edit-client>

js
<script>
import editClient from "./editClient"  // 引入子组件
export default {
  data() {
    return {
      dialogEditVisible:false,
    }
  },
  components:{
    editClient
  },
  methods: {
     // 子组件回调，关闭父组件弹出窗
    changeDialogVisible() {
      this.dialogEditVisible = false;
   
    },
    // 点击按钮传参弹层
    editClientClick() {
      this.dialogEditVisible = true

    },
}
</script>

editClient.vue 子组件 $emit 传给父

html
 <el-dialog title="收货地址" :visible.sync="dialogEditVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn()">取 消</el-button>
        <el-button type="primary" @click="submitBtn()">确 定</el-button>
      </div>
    </el-dialog>

js
export default {
  props: ['dialogEditVisible'],  // 接受父组件传来的参数
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    cancelBtn() {
    // 传给父组件参数
      this.$emit('closeModal', false)
    },
    submitBtn() {
      this.$emit('closeModal', false)
    }
  }
}