How to realize data transfer in slot

using the background, when using the component to customize the table in the vue-admin framework, I want to add a button to the table and implement the dialog form through buttons. Due to functional requirements, I need different pages and different dialog form fields, so I need to add a slot tag to the custom form that comes with the framework and reuse it when I use it, but in the process of using the data, defined by my sub-component It has been reported wrong and undefined, how should I modify it?
parent component (multi-function table) part of the code, my purpose is to add a button, but for different pages, button text, the dialog box form is different:

<div v-if="searchable && searchPlace === "top"" class="search-con search-con-top">
  <Select v-model="searchKey" class="search-col">
    <Option v-for="item in columns" v-if="item.key !== "handle"" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
  </Select>
  <Input @on-change="handleClear" clearable placeholder="" class="search-input" v-model="searchValue"/>
  <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/></Button>
  <slot></slot>
</div>

Sub-components (using multi-function tables):

data () {
    return {
      model1: false,
      columns: [
        { title: "", key: "code", sortable: true },
        { title: "", key: "format", editable: true },
        { title: "", key: "create_time" },
        {
          title: "Handle",
          key: "handle",
          options: ["delete"],
          button: [
            (h, params, vm) => {
              return h("Poptip", {
                props: {
                  confirm: true,
                  title: "?"
                },
                on: {
                  "on-ok": () => {
                    vm.$emit("on-delete", params)
                    vm.$emit("input", params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              })
            }
          ]
        }
      ],
      tableData: [
        {
          "code": "asdv1321fs",
          "format": "205",
          "create_time": "2018-09-20 09:38:54"
        },
        {
          "code": "asdv4532fs",
          "format": "205",
          "create_time": "2018-09-20 09:38:54"
        },
        {
          "code": "asdv1321fs",
          "format": "205",
          "create_time": "2018-09-20 09:38:54"
        },
        {
          "code": "asdv1321fs",
          "format": "205",
          "create_time": "2018-09-20 09:38:54"
        },
        {
          "code": "asdv1321fs",
          "format": "205",
          "create_time": "2018-09-20 09:38:54"
        }
      ]
    }
  }

but error:

Property or method "modal1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I wanted to use props to solve the problem, but I don"t seem to be able to use

Jul.28,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37026-2c051.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37026-2c051.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?