vue3作用域插槽传值

父组件

<template >
  <SelectDialog>
    <template v-slot:elForm="{ editActiveName }">
      <demoForm :clickHandler='editActiveName'></demoForm>
      <!-- <demoForm @editActiveName='editActiveName(slotProps)'></demoForm> -->
    </template>
  </SelectDialog>
</template>
<script setup>
import demoForm from "./components/demoForm.vue";
import SelectDialog from "./components/SelectDialogNew.vue";

// const editActiveName = (data) => {
//   data.editActiveName('second')
// };
</script>

子组件

<template>
  <el-button plain @click="dialogVisible = true">
    Click to open the Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <el-tabs v-model="activeName" class="demo-tabs" >
    <el-tab-pane label="User" name="first">
      <slot name="elForm" :editActiveName="editActiveNameFuc"></slot>
    </el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
  </el-tabs>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref} from "vue";
const activeName = ref('first')

const editActiveNameFuc = (data) => {
  activeName.value = data;
}
const dialogVisible = ref(false)

</script>

插槽

<template>
  <el-form
    :model="form"
    label-width="auto"
    style="max-width: 600px; margin: 20px"
  >
      <div @click="edit" style="cursor: pointer;">编辑模版</div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, defineEmits, defineProps} from "vue";
const props = defineProps(['clickHandler'])
console.log(props.clickHandler,1111111111);
// const emits = defineEmits(['editActiveName'])
const edit = () => {
  props.clickHandler('second')
  // emits('editActiveName')
};
</script>