我如何通过form元素的Dom对象在Vue 3中找到元素V-model绑定的值并修改它

jfgube3f  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(180)

我正在编写一个基于Vue 3的插件,现在我需要一个明显不是Vue 3 API一部分的功能,我认为这需要一些Vue 3源代码的知识来做到这一点,这里是所需功能的描述:
假设您有以下代码片段:

<div class="box">
    <input type="text" v-model="state.text">
</div>

<script>
    const {createApp, reactive} = Vue
    const vm = createApp({
        setup ()
        {
            const state = reactive({
                text: "123"
            })

            return {
                state
            }
        }
    }).mount(".box")
</script>

字符串
基于这个代码片段,我需要通过input元素的dom对象在Vue外部修改v-model值。我该怎么做?

const input_dom = document.querySelector("input")

// I have obtained the input_dom, and I hope to change the value of state.text through input_dom.

input_dom??

klsxnrf1

klsxnrf11#

Vue 3中有未记录的__vue_app__等属性,但它们用于调试,可能在生产构建中不可用。
一个很好的做法是显式公开公共API。如果需要更改字段值,那么使用方法进行更改将更容易调试和维护。

document.querySelectorAll(".box").forEach(el => {
  const app = createApp({
    setup (props, ctx) {
      ...
      ctx.expose({
        update(val) {
          state.text = val;
        }
      });
    }
  });
  el.myApp = app.mount(el);
});

字符串
使用方式如下:

document.querySelector(".box").myApp.change(...);


对于单个应用示例,它可以是全局变量,因为它更容易跟踪和调试:

window.myApp = app.mount("#box")

相关问题