使用背景，在使用vue-admin框架中，使用组件自定义表格时，想在表格中添加一个按钮，通过按钮实现对话框表单，由于功能需求，我需要不同的页面，对话框表单字段不同，所以我需要在框架自带的自定义表单中添加一个slot标签，然后使用时进行复用，但是我使用的过程中，我子组件定义的data，一直报错未定义，我该如何进行修改。
父组件（多功能表格）一部分代码，我的目的就是在添加一个按钮，但是对于不同页面，按钮文字，展示的对话框表单是不同的：

<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"/>&nbsp;&nbsp;搜索</Button>
  <slot></slot>
</div>

子组件（使用多功能表格）：

<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" @on-delete="handleDelete">
      <Button @click="model1 = true" class="search-btn" type="primary">添加</Button>
      </tables>
    </Card>
    <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>Content of dialog</p>
        <p>Content of dialog</p>
        <p>Content of dialog</p>
    </Modal>
  </div>
</template>

子组件data中也定义了model1：

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': '满20减5',
          'create_time': '2018-09-20 09:38:54'
        },
        {
          'code': 'asdv4532fs',
          'format': '满20减5',
          'create_time': '2018-09-20 09:38:54'
        },
        {
          'code': 'asdv1321fs',
          'format': '满20减5',
          'create_time': '2018-09-20 09:38:54'
        },
        {
          'code': 'asdv1321fs',
          'format': '满20减5',
          'create_time': '2018-09-20 09:38:54'
        },
        {
          'code': 'asdv1321fs',
          'format': '满20减5',
          'create_time': '2018-09-20 09:38:54'
        }
      ]
    }
  }

但是报错：

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.

我本想使用props解决，但貌似不会使用