Javascript 如何将Vuejs web组件用作非vue web应用程序中的输入元素？

我使用

VueCli3

创建了一个vuejs web组件，最终编译的组件如下所示：

<script src="https://unpkg.com/vue"></script>
<script src="./my-lib.js"></script>

<my-lib></my-lib>

<form method="post" action="/test.php">
   <input type="text" name="title" value="foo">
   <my-lib></my-lib>
   <button type="submit">submit</button>
</form>

现在的问题是，当我提交表单时，只有

title

参数出现在后端，

my_input

参数不存在

我该怎么做才能让它工作

将web组件与shadow DOM一起使用时，shadow DOM中的输入元素不会与传统的表单提交一起提交。请在这里阅读

通常，唯一的选择是引入一些JavaScript来提交表单。我能想到的一个简单方法是在触发submit事件时使用，然后手动内省所有自定义元素

function onSubmit() {


    const form = document.querySelector("form");

    const formData = new FormData();

    for (let x of form.elements) {
        formData.append(x.name,  x.value);
    }

    const customField = form.querySelector("my-lib");

    // Some way to access the custom form field's value
    formData.append("custom-field-name", customField.customValue);

    // Submit now
    // Write code to submit form using XHR or Fetch API
}

要保存一些击键，可以避免for循环，因为可以使用现有表单创建

FormData

：

const form = document.querySelector("form");
const formData = new FormData(form);

---

感谢您的回答：）我必须通过

Ajax

发送数据吗？@AhmadMobaraki，使用

XHR

或

Fetch

API！

const form = document.querySelector("form");
const formData = new FormData(form);