vue3父组件和子组件如何传值实例详解

 //子组件
<template>
  <el-dialog v-model="dialogFORMVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
  import { Reactive, ref } from "vue";
 
  const formLabelWidth = '140px'
 
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
 
</script>
 
<style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>

<template>
  <el-button type="primary" @click="handlerDialog"
  >添加用户
  </el-button>
  <test />
</template>
 
<script setup>
  import { reactive, ref } from "vue";
  import test from './test'
 
  const dialogFormVisible = ref(false)
 
  const handlerDialog = () => {
    dialogFormVisible.value = true
  }
</script>
 
<style scoped>
 
</style>

<test v-model="dialogFormVisible"
        v-if="dialogFormVisible"/>

 <el-dialog :model-value="dialogFormVisible" title="Shipping address">

<template>
  <el-dialog :model-value="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        //加上关闭的点击事件
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleClose">Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
//记得引入defineEmits
  import { reactive, defineEmits,ref } from "vue";
 
//实例化defineEmits
 const emits = defineEmits(['update:modelValue'])
 
//关闭的点击事件
  const handleClose = () => {
    emits('update:modelValue', false)
  }
 
  const dialogFormVisible = ref(false)
 
  const formLabelWidth = '140px'
 
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
</script>
 
<style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>

  <el-button type="primary" @click="handlerDialog('添加用户')"
      >添加用户
      </el-button>

  <template #default="{ row }" v-else-if="item.prop==='action'">
     <el-button type="primary" @click="handlerDialog(row)" :icon="Edit"/>
 </template>

 const handlerDialog = (row) => {
 
    if(row==='添加用户'){
      dialogTitile.value = "添加用户"
      dialogTableValue.value = {}
    }else{
      dialogTitile.value = "修改用户"
      console.log(row)
      dialogTableValue.value = JSON.parse(jsON.stringify(row))
 
    }
    dialogFormVisible.value = true
  }

  <test v-model="dialogFormVisible"
        v-if="dialogFormVisible"
        :dialogTitile="dialogTitile"
        :dialogTableValue="dialogTableValue"
  />

 import {  defineProps } from 'vue' 
//接受父组件的值
  const props = defineProps({
    dialogTitile: {
      type: String,
      default: '',
      required: true
    },
    dialogTableValue:{
      type:Object,
      default: ()=>{},
    }
 
  })

import { watch } from 'vue'
watch(()=>props.dialogTableValue,()=>{
   form.value = props.dialogTableValue.value
},{deep:true,immediate:true})

<el-form-item label="密码" :label-width="formLabelWidth" prop="passWord" v-if="dialogTitile==='添加用户'">
        <el-input v-model="form.password" name="password" type="password" show-password/>
 </el-form-item>

 const emits = defineEmits(['update:modelValue','initUserList']) 
 
const handleConfirm = () => {
    formref.value.validate(async (valid) => {
      if (valid) {
        props.dialogTitile==='添加用户' ? await adduser(form.value) : await editUser(form.value)
        props.dialogTitile==='添加用户' ? ElMessage.success("添加成功"):ElMessage.success("修改成功")
        emits('initUserList')
        handleClose()
      } else {
        props.dialogTitile==='添加用户' ? ElMessage.error('"添加失败'):ElMessage.success("修改失败")
        return false
      }
    })
 
  }