父子互传值

父级代码

<template>
  <s-page v-bind="breadcrumbs">
    <s-center>
      <s-btn label="传父值" color="primary" @click="onChildDialog" />
      <div>子级的值：{{ childVal }}</div>
    </s-center>
  </s-page>

  <childDialog
    v-if="childShow"
    v-model="childShow"
    @operate="closeChildDialog"
    :parentVal="parentVal"
  />
</template>

<script setup>
import { ref } from 'vue';
import childDialog from './ChildDialog.vue';

/**
 * 父子互传值
 */
//  面包屑
const breadcrumbs = {
  desktop: ['/parent/child'],
  pagePadding: true,
};

const childShow = ref(false);

const parentVal = ref(null);

const childVal = ref(null);

/**
 * 打开子级dialog
 */
const onChildDialog = () => {
  childShow.value = true;
  parentVal.value = '父级的数据';
};

/**
 * 关闭子级dialog
 */
const closeChildDialog = (val) => {
  childShow.value = false;
  childVal.value = val;
};
</script>

<style lang="scss" scoped></style>

子级代码

<template>
  <s-dialog cancel-btn size="small">
    <template v-slot:body> parentVal：{{ props.parentVal }}</template>
    <template v-slot:btn>
      <s-btn-save label="传子值" @click="operateParent" />
    </template>
  </s-dialog>
</template>

<script setup>
// 父子互传值-dialog
const emits = defineEmits(['operate']);

const props = defineProps(['parentVal']);

const operateParent = () => {
  emits('operate', '子级的数据');
};
</script>

<style lang="scss" scoped></style>