vue-form-design 如何在外部获取到生成的表单

vue-form-design 的表单生成是通过 JSON 数据来实现的，因此可以通过获取该 JSON 数据来获得生成的表单。

具体操作如下：

1. 在 vue-form-design 中，使用 `@get-json` 事件来获取生成的 JSON 数据，代码如下：

<template>
  <vue-form-designer
    @get-json="handleGetJson"
  />
</template>

<script>
export default {
  methods: {
    handleGetJson(json) {
      console.log(json)
      // 在这里处理获取到的 JSON 数据
    }
  }
}
</script>

2. 在外部的组件中引入 vue-form-design，并将获取到的 JSON 数据传递给 vue-form-design，代码如下：

<template>
  <div>
    <button @click="handleClick">获取表单</button>
    <vue-form-design
      :json="json"
      ref="formDesigner"
    />
  </div>
</template>

<script>
import VueFormDesign from 'vue-form-design'

export default {
  components: {
    VueFormDesign
  },
  data() {
    return {
      json: null
    }
  },
  methods: {
    handleClick() {
      const formDesigner = this.$refs.formDesigner
      this.json = formDesigner.getFormJson()
    }
  }
}
</script>

在这个例子中，我们使用了 `getFormJson` 方法来获取 vue-form-design 生成的 JSON 数据。在 `handleClick` 方法中，我们通过 `$refs` 来获取 vue-form-design 的实例，然后调用 `getFormJson` 方法来获取 JSON 数据，并将其存储在 `json` 变量中。这样，我们就可以在外部的组件中获取到 vue-form-design 生成的表单了。