是否可以將vue輸入組件添加到標(biāo)準(zhǔn)html表單中？我知道這不是處理 vue 表單的理想方法，但我很好奇作為一種“快速而骯臟”的方式將自定義元素添加到預(yù)先存在的 html 表單中的可能性。這是一個假設(shè)的例子：<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 組件中輸入元素公開的值，并在用戶提交表單時將其作為參數(shù)發(fā)送。是否有其他方法告訴瀏覽器如何從 vue 組件訪問值，例如，如果它在內(nèi)部不使用本機輸入，可能使用 Web 組件作為包裝器或使用 Shadow dom？
1 回答
holdtom
TA貢獻1805條經(jīng)驗 獲得超10個贊
<input>提交表單時，瀏覽器應(yīng)包含表單中的任何元素。瀏覽器不會關(guān)心它是否<input>位于 Vue 組件內(nèi)。
對于還沒有<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/vue@2.6.11/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>
- 1 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消