Vue组件内嵌套打开组件触发data选项需为函数警告如何解决？

警告产生原因 #

1. 页面刷新（被误认为是重渲染）的原因：
   form标签内的button默认type属性为submit，点击后会触发表单默认提交行为，直接重载当前页面，看起来和组件重渲染的表现一致。
2. data选项警告的原因：
   你的SmallForm.vue仅声明了template模板，没有显式添加script导出组件配置。在Vue 2的部分编译规则下，会自动生成默认组件配置，其中data字段被设置为普通对象而非函数，违反了Vue可复用组件的data必须是返回实例独立值的函数的规范，因此抛出警告。

解决方法 #

• 第一步：给所有表单内的自定义功能按钮添加type="button"，阻止默认表单提交：
  修改BigForm.vue中的按钮代码：

  <button type="button" @click="showSmallForm()">Show small form</button>
  

  修改SmallForm.vue中的按钮代码：

  <button type="button">This is small form</button>
  

• 第二步：给SmallForm.vue补充完整的组件导出声明：

  <template>
    <form>
      <input placeholder="Small form input" />
      <button type="button">This is small form</button>
    </form>
  </template>
  <script>
  export default {
    name: 'SmallForm',
    // 显式声明data为函数，哪怕没有自定义状态
    data() {
      return {}
    }
  }
  </script>
  

可选优化项 #

BigForm.vue的组件name字段当前设置为HelloWorld，建议修改为和文件名一致的BigForm，避免后续组件全局注册时出现命名冲突。

内容的提问来源于stack exchange，提问作者Sy Quoc