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

Question

是否可以将vue输入组件添加到标准html表单中？我知道这不是处理 vue 表单的理想方法，但我很好奇作为一种“快速而肮脏”的方式将自定义元素添加到预先存在的 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 组件中输入元素公开的值，并在用户提交表单时将其作为参数发送。是否有其他方法告诉浏览器如何从 vue 组件访问值，例如，如果它在内部不使用本机输入，可能使用 Web 组件作为包装器或使用 Shadow dom？

Answer 1

<input>提交表单时，浏览器应包含表单中的任何元素。浏览器不会关心它是否<input>位于 Vue 组件内。对于还没有<input>（或其他合适的表单元素）的组件，您可以添加隐藏输入<input type="hidden">来保存值。如果您要包含的组件是第三方组件，那么您将无法直接添加隐藏输入。但是，您仍然可以使用包装器组件来添加它。下面的示例说明了如何处理该场景。const thirdPartyComponent = {&nbsp; template: `&nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; @click="onClick"&nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; Increment {{ value }}&nbsp; &nbsp; </button>&nbsp; `,&nbsp;&nbsp;&nbsp; props: ['value'],&nbsp;&nbsp;&nbsp; methods: {&nbsp; &nbsp; onClick () {&nbsp; &nbsp; &nbsp; this.$emit('input', this.value + 1)&nbsp; &nbsp; }&nbsp; }}const myCustomFancyVueComponent = {&nbsp; template: `&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <third-party-component v-model="counter" />&nbsp; &nbsp; &nbsp; <input type="hidden" :value="counter">&nbsp; &nbsp; </div>&nbsp; `,&nbsp;&nbsp;&nbsp; components: {&nbsp; &nbsp; thirdPartyComponent&nbsp; },&nbsp;&nbsp;&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; counter: 4&nbsp; &nbsp; }&nbsp; }}new Vue({&nbsp; el: 'form',&nbsp;&nbsp;&nbsp; components: {&nbsp; &nbsp; myCustomFancyVueComponent&nbsp; }})<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script><form action="/users" accept-charset="UTF-8" method="post">&nbsp; <input type="email" name="user[email]">&nbsp; <input type="password" name="user[password]">&nbsp; <my-custom-fancy-vue-component></my-custom-fancy-vue-component>&nbsp; <input type="submit" value="Sign up"></form>