是否可以在传统的html表单中添加vue组件？

Question

是否可以将vue输入组件添加到标准html表单？我知道这不是处理Vue表单的ideal方法，但是我很好奇这种将定制元素添加到现有html表单中的“快速而肮脏”的可能性。这是一个假设的示例：

<form action="/users" accept-charset="UTF-8" method="post">
  <input type="email" name="user[email]" />
  <input type="password" name="user[password]" />
  <my-custom-fancy-vue-component />
  <input type="submit"value="Sign up">
</form>

我想知道浏览器是否可以读取带有vue组件的输入元素公开的值，并在用户提交表单时将其作为参数发送。还有其他方法告诉浏览器如何在内部不使用本机输入（例如，使用Web组件作为包装器或使用影子dom）从vue组件访问值吗？

Answer 1

提交表单时，浏览器应包含

Any <input>元素”。浏览器无需关心<input>是否在Vue组件内。

对于尚未具有<input>（或其他合适的表单元素）的组件，您可以添加一个隐藏的输入<input type="hidden">，以保存该值。

如果您要包含的组件是第三方组件，那么您将无法直接添加隐藏的输入。但是，您仍然可以使用包装器组件添加它。下面的示例说明了如何处理这种情况。

const thirdPartyComponent = {
  template: `
    <button
      @click="onClick"
      type="button"
    >
      Increment {{ value }}
    </button>
  `,
  
  props: ['value'],
  
  methods: {
    onClick () {
      this.$emit('input', this.value + 1)
    }
  }
}

const myCustomFancyVueComponent = {
  template: `
    <div>
      <third-party-component v-model="counter" />
      <input type="hidden" :value="counter">
    </div>
  `,
  
  components: {
    thirdPartyComponent
  },
  
  data () {
    return {
      counter: 4
    }
  }
}

new Vue({
  el: 'form',
  
  components: {
    myCustomFancyVueComponent
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<form action="/users" accept-charset="UTF-8" method="post">
  <input type="email" name="user[email]">
  <input type="password" name="user[password]">
  <my-custom-fancy-vue-component></my-custom-fancy-vue-component>
  <input type="submit" value="Sign up">
</form>