记录一下 vue3中 父子组件之间的传值

                                    子组件传值到父组件 和 子组件调用父组件方法

// 父组件的代码：

 <el-dialog v-model="dialogVisible" title="留言" width="50%" :before-close="handleClose">
    <WorkorderDialog v-model:suggestion="childData" @dialogClose="handleClose" />
  </el-dialog>
<script setup lang="ts">
  import { ref, toRefs, reactive, onMounted } from 'vue'
  const dialogVisible = ref(false)
  let childData = ref('')
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
}
</script>

**

// 子组件的代码：

 <template>
  <el-input
    v-model="textInput"
    :value="suggestion"
    @input="onInput"
    type="textarea"
    placeholder="请输入留言"
  />
  <el-button type="primary" @click="submitForm()" class="submit">提交</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const textInput = ref('')
defineProps({
  suggestion: {
    type: String
  }
})

//子组件传值到父组件
const emit = defineEmits(['update:suggestion', 'dialogClose'])
const onInput = (e) => {
  if (e) {
    emit('update:suggestion', e)
  }
}

// 调用父组件方法关闭弹窗
const submitForm = () => {
  emit('dialogClose')
}
</script>
<style lang="less" scoped>
.dialog-ruleForm {
  padding-top: 30px;
}
.submit {
  margin-top: 10px;
}
</style>