Vue 3：如何实现修改 DOM 中所有输入字段的功能？

Posted 2023-02-21

【中文标题】Vue 3：如何实现修改 DOM 中所有输入字段的功能？

【英文标题】：Vue 3: How to implement a function that modifies all input fields in the DOM?

【发布时间】：2021-08-13 13:44:39

【问题描述】：

我是 Vue 新手，想为所有输入字段添加 onfocus 功能。当我使用 mixin 时，每次挂载组件时都会调用该函数。

createApp(App).mixin(
    mounted() 
        myFunction() 
            document.querySelectorAll('input').doSomething()
        
    
).mount('#app');

这是有道理的，通常也是我想要的，因为新添加的输入字段也应该受到影响。但是，每次挂载组件时，该函数都会遍历整个 DOM，对吧？我想避免对已经具有 onfocus 功能的字段进行不必要的迭代。那么做这样的事情的最佳做法是什么？

【参考方案1】：

import  createApp, h  from "vue";
import App from "./App.vue";
const app = createApp(
  render: () => h(App)
);

app.mixin(
  methods: 
    myFunction() 
      this.$el.querySelectorAll("input").forEach((el) => 
        alert(el.getAttribute("name"));
      );
    
  ,

  mounted() 
    this.myFunction();
  
);

app.mount("#app");

【讨论】：

谢谢！但是使用this.$el.querySelectorAll('input')，我得到 TypeError: this.$el.querySelectorAll is not a function in console ...但它实际上正在工作并输出错误 after my做一点事（）。我在这里做错了什么？

它对我来说很完美，也许你做错了什么？ codesandbox.io/s/wonderful-cannon-ufy9k?file=/src/main.js

取决于您的模板，this.$el 可能不是指真正的 dom 节点，因此您可能无法在其上调用 querySelectorAll。这主要是由于对多根组件的支持。要正确获取对真实 dom 节点的引用，您应该使用 Template Refs