Wie man Dom in Vuejs bekommt

So erhalten Sie Dom in VueJS: 1. Schreiben Sie im DOM-Teil der Komponente „ref="xxx"“ in ein beliebiges Tag. 2. Rufen Sie das Element über das Komponentenobjekt „this.$refs.xxx“ ab.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue.js Beispielstudie: DOM-Elemente abrufen

1. DOM-Elemente abrufen

Um DOM-Elemente in Vue abzurufen, können wir ref verwenden. ref。

用法(和React一样)：
（1）在组件的DOM部分，任意标签中 写上：ref="xxx"
（2）通过组件对象 this.$refs.xxx 获取到元素

1、获取HTML标签的DOM

例1：

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <button ref="btn">我是按钮</button>    
      </div>`,
    beforeCreate() {
      //这里不能操作数据
      console.log(&#39;beforeCreate: &#39;, this.$refs.btn);
    },
    created() {
      //这里可以操作数据了
      console.log(&#39;created: &#39;, this.$refs.btn);
    },
    beforeMount() {
      //new Vue 发生装载， 替换 <div id="app">之前
      console.log(&#39;beforeMount: &#39;, this.$refs.btn);
    },
    mounted() {
      //装在数据之后
      console.log(&#39;mounted: &#39;, this.$refs.btn);
    }, 
  };

  new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制台输出：

说明：mounted()时才能获取this.$refs.btn

---

2、获取组件的DOM

例2：

<div id="app"></div>

<script type="text/javascript">
  let Temp = {
    template: `
      <div>我是子组件</div>
    `,
  };
  let App = {
    components: {
      temp: Temp,
    },
    template: `<temp ref="tmp"/>`,
    mounted() {
      console.log(this.$refs.tmp);
    },
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

控制台输出：

我们看到控制台输出的是 temp组件。
这里我们要关注的是 组件的 各个属性（eg: $ el、$ parent 等）···

假如我们把console.log(this.$refs.tmp)改为：

console.log(this.$refs.tmp.$el);

控制台会输出下图，由此可知 $el 代表着什么~

总结：

• $parent： 获取当前组件的父组件
• $children：················ 的子组件
• $root：获取new Vue的实例 （即上面的：vm）
• $el: 获取当前组件的DOM元素

---

二、给DOM元素添加事件的特殊情况

例：

要求：在显示input元素的瞬间，获取input的焦点

<div id="app"></div>

<script type="text/javascript">
  let App = {
    template: `
      <div>
        <input type="text" v-if="isShow" ref="myInput" />
      </div>`,
    data() {
      return {
        isShow: false,
      };
    },
    mounted() {
      this.isShow = true;    //显示input元素
      this.$refs.myInput.focus();  //获取input的焦点
    },   
  };

  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      app: App
    },
    template: `<app />`,
  });
</script>

运行后报错：

报错显示focus不存在，原因是 this.$refs.myInput 也是undefined，为什么ref没获取到DOM元素呢？

我们先思考，如果我们把mounted函数内改成：

mounted() {
      this.isShow = true;  
      this.isShow = false;  
      this.isShow = true;  
},

运行过程中，input元素会 先显示，再消失，然后再显示吗？
答案是否定的。因为Vue会先让代码执行完，然后才会根据最终的值，进行DOM操作。 其实上面的代码等同于下面的代码：

mounted() {
      this.isShow = true;  
},

那么怎么解决呢？

这里我们用 $nextTick解决~

---

vm.$nextTick

什么时候用：在Vue渲染DOM到页面后 立即做某件事，用$nextTick

Verwendung (wie React):
(1) Schreiben Sie in den DOM-Teil der Komponente ein beliebiges Tag: ref="xxx"
(2) Durch Komponentenobjekt this.$refs.xxx Holen Sie sich das Element

---

1 Holen Sie sich den DOM des HTML-Tags

Beispiel 1:

this.$nextTick(function() {
   ·····dosomething
})

Konsolenausgabe:
< img src= "https://img.php.cn/upload/article/000/000/020/b9260c989b41830dddf158437ddb80c2-0.png" alt="Bildbeschreibung hier einfügen"/>
Hinweis: Es kann nur sein erhalten, wenn mount() this.$refs.btn

2. Holen Sie sich den DOM der Komponente

Beispiel 2:

let App = {
  template: `
    <div>
      <input type="text" v-if="isShow" ref="myInput" />
    </div>`,
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    //显示input元素的瞬间，获取焦点
    this.isShow = true;
    this.$nextTick(function() {
      this.$refs.myInput.focus();  
    });
  },
  
};

let vm = new Vue({
  el: &#39;#app&#39;,
  components: {
    app: App
  },
  template: `<app />`,
});

Konsolenausgabe:

Wir sehen, dass die Ausgabe von Die Konsole ist temporäre Komponente.
Worauf wir uns hier konzentrieren möchten, sind die verschiedenen Eigenschaften der Komponente (z. B. $ el, $ parent usw.) ... 🎜🎜Wenn wir console.log(this.$refs.tmp) in ändern : 🎜rrreee🎜Kontrolle Die Station gibt das folgende Bild aus, anhand dessen wir erkennen können, was $el darstellt~
🎜

Zusammenfassung:

• $parent: Ruft die übergeordnete Komponente der aktuellen Komponente ab
$children:···· ············ Unterkomponenten von
• $root: Holen Sie sich die Instanz von neuem Vue (d. h. oben: vm)
$el: Holen Sie sich die aktuellen Komponenten-DOM-Elemente

🎜🎜2 Sonderfälle des Hinzufügens von Ereignissen zu DOM-Elementen🎜🎜Beispiel:🎜🎜Anforderung: Holen Sie sich den Fokus der Eingabe zum Zeitpunkt der Eingabe Element wird angezeigt🎜rrreee🎜Fehler nach dem Ausführen:
Fehlerbericht Es zeigt, dass der Fokus nicht vorhanden ist. Der Grund dafür ist, dass this.$refs.myInput ebenfalls undefiniert ist. Warum erhält ref das DOM-Element nicht? 🎜🎜Lassen Sie uns zuerst darüber nachdenken, ob wir die montierte Funktion ändern in: 🎜rrreee🎜Während des Betriebs wird das Eingabeelement zuerst angezeigt, dann ausgeblendet und dann wieder angezeigt?
Die Antwort ist nein. Weil Vue die Ausführung des Codes zuerst beenden lässt und dann DOM-Operationen basierend auf dem Endwert ausführt. Tatsächlich entspricht der obige Code dem folgenden Code: 🎜rrreee🎜Wie löst man das Problem? 🎜🎜Hier verwenden wir $nextTick, um ~ zu lösen🎜🎜

vm.$nextTick

🎜Wann zu verwenden ist: Machen Sie sofort etwas, nachdem Vue das DOM auf der Seite gerendert hat. Verwenden Sie $nextTick

Das obige ist der detaillierte Inhalt vonWie man Dom in Vuejs bekommt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!