Was soll ich tun, wenn uniapp $refs nicht abgerufen werden kann?

In Uniapp ist $refs ein sehr wichtiges Attribut, das zum Abrufen von Komponenteninstanzen verwendet werden kann. Wenn jedoch $refs zum Abrufen einer Komponenteninstanz verwendet wird, kann es sein, dass diese möglicherweise nicht abgerufen wird. In diesem Artikel wird dieses Problem behandelt.

1. Was ist $refs

$refs ist ein spezielles Attribut in Vue, das zum Abrufen von Komponenteninstanzen oder Dom-Elementen verwendet werden kann. Dasselbe gilt auch in uniapp.

Wir können ein $refs-Objekt erstellen, indem wir der Komponente ein Ref-Attribut hinzufügen:

<template>
  <view ref="myComponent"></view>
</template>
<script>
  export default{
    onReady(){
      console.log(this.$refs.myComponent)
    }
  }
</script>

Im obigen Code haben wir der Ansichtskomponente ein Ref-Attribut hinzugefügt und es „myComponent“ genannt. Nachdem die Komponenteninstanz fertig ist, erhalten wir die Komponenteninstanz über this.$refs.myComponent.

2. Es kann zu Problemen mit $get kommen

Wenn in Uniapp $refs von get zum Abrufen von Komponenteninstanzen verwendet werden, kann es sein, dass es nicht abgerufen wird. Die Gründe sind wie folgt:

1. Falscher Erwerbszeitpunkt

In uniapp ist der Lebenszyklus von Komponenten sehr wichtig. Wenn Sie $refs verwenden, um die Komponenteninstanz zu Beginn des Komponentenlebenszyklus abzurufen, können Sie sie möglicherweise nicht abrufen. In diesem Fall können wir die Funktion uni.nextTick() verwenden, um sicherzustellen, dass die Erfassungszeit korrekt ist.

<template>
  <my-component ref="myComponent"></my-component>
</template>
<script>
  export default{
    onReady(){
      uni.nextTick(()=>{
        console.log(this.$refs.myComponent)
      })
    }
  }
</script>

Im obigen Code haben wir der my-component-Komponente ein ref-Attribut hinzugefügt. Nachdem die Komponenteninstanz bereit ist, stellen wir die Korrektheit des Erfassungszeitpunkts durch die Funktion uni.nextTick() sicher.

2. Die Komponente setzt das Ref-Attribut nicht

Dieses Problem ist relativ einfach. Wenn die Komponente das Ref-Attribut nicht setzt, kann $get die Komponenteninstanz nicht abrufen. In diesem Fall müssen wir nur das ref-Attribut hinzufügen, um das Problem zu lösen.

3. Eine nicht vorhandene Komponenteninstanz abrufen

Die $get-Methode gibt eine Komponenteninstanz zurück. Wenn wir beim Aufruf eine nicht vorhandene Komponenteninstanz übergeben, kann die $get-Methode die Komponenteninstanz nicht zurückgeben. Daher müssen wir die eingehende Komponenteninstanz überprüfen.

<template>
  <my-component ref="myComponent"></my-component>
</template>
<script>
  export default{
    onReady(){
      const myComponent = this.$refs.myComponent;
      if(myComponent){
        console.log(myComponent)
      }else{
        console.error("组件实例不存在")
      }
    }
  }
</script>

Im obigen Code weisen wir myComponent zunächst der erhaltenen Komponenteninstanz zu und beurteilen sie dann. Wenn myComponent vorhanden ist, wird die Komponenteninstanz ausgegeben, wenn sie nicht vorhanden ist, wird die Fehlermeldung „Komponenteninstanz existiert nicht“ ausgegeben.

3. Probleme, die dazu führen können, dass $refs nicht abgerufen werden können

Zusätzlich zu Problemen mit der $get-Methode gibt es auch einige Faktoren, die dazu führen können, dass $refs keine Komponenteninstanzen abrufen kann.

1. $refs werden in Vorlagen verwendet

Die Vorlage ist Teil der Komponente in Uniapp und kann innerhalb der Komponente verwendet werden. Wenn Sie jedoch $refs innerhalb der Vorlage verwenden, um die Komponenteninstanz abzurufen, kann es sein, dass diese nicht abgerufen wird. Dies liegt daran, dass die Vorlage früher als die Komponenteninstanz generiert wird. Wenn wir also $refs innerhalb der Vorlage verwenden, um die Komponenteninstanz abzurufen, können wir sie nicht abrufen. Die Möglichkeit, dieses Problem zu vermeiden, besteht darin, $refs innerhalb der Komponenteninstanz zu platzieren und die Funktion uni.nextTick() entsprechend zu verwenden.

<template>
  <my-component></my-component>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <view ref="myComponent"></view>
        `,
        onReady(){
          uni.nextTick(()=>{
            console.log(this.$refs.myComponent)
          })
        }
      }
    }
  }
</script>

Im obigen Code definieren wir eine Ansichtskomponente innerhalb der my-component-Komponente und fügen das ref-Attribut hinzu. Nachdem die Ansichtskomponenteninstanz bereit ist, stellen wir die Korrektheit des Erfassungszeitpunkts durch die Funktion uni.nextTick() sicher.

2. Das Problem der Datenübertragung zwischen übergeordneten Komponenten und untergeordneten Komponenten

In Uniapp kann die Komponenteninstanz die von der übergeordneten Komponente übergebenen Daten über das Props-Attribut abrufen. Wenn wir also $refs in der übergeordneten Komponente verwenden, um die Instanz der untergeordneten Komponente abzurufen, die untergeordnete Komponente jedoch das Ref-Attribut nicht festlegt, kann $refs die Instanz der untergeordneten Komponente nicht abrufen.

//子组件
<template>
  <view>这是一个子组件</view>
</template>
<script>
  export default{
    props:['msg']
  }
</script>

//父组件
<template>
  <my-component/>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <child-component></child-component>
        `,
        onReady(){
          console.log(this.$refs.childComponent)    //获取不到子组件实例
        }
      }
    }
  }
</script>

Im obigen Code verwenden wir $refs in der übergeordneten Komponente, um die Instanz der untergeordneten Komponente abzurufen, aber die untergeordnete Komponente legt das ref-Attribut nicht fest. Daher können wir die Instanz der untergeordneten Komponente nicht abrufen. Um dieses Problem zu lösen, können wir das ref-Attribut in der untergeordneten Komponente hinzufügen und es an die übergeordnete Komponente übergeben.

//子组件
<template>
  <view>这是一个子组件</view>
</template>
<script>
  export default{
    props:['msg'],
    mounted(){
      this.$emit("getChild",this)       //将子组件实例传递给父组件
    }
  }
</script>

//父组件
<template>
  <my-component @getChild="getChild"/>
</template>
<script>
  export default{
    components:{
      myComponent:{
        template:`
        <child-component ref="childComponent"></child-component>
        `,
        methods:{
          getChild(instance){
            console.log(instance.$el)      //获取到子组件的el元素
            console.log(this.$refs.childComponent)    //获取到子组件实例
          }
        }
      }
    }
  }
</script>

Im obigen Code definieren wir einen gemounteten Zyklus in der untergeordneten Komponente, in dem wir die Instanz der untergeordneten Komponente über this.$emit() an die übergeordnete Komponente übergeben. Die übergeordnete Komponente erhält die Instanz der untergeordneten Komponente über das ref-Attribut der untergeordneten Komponente.

4. Zusammenfassung

$ref ist ein sehr wichtiges Attribut in Uniapp, das zum Abrufen von Komponenteninstanzen und Dom-Elementen verwendet werden kann. Bei der Verwendung von $refs müssen wir auf die folgenden Punkte achten:

1. Die Erfassungszeit muss korrekt sein;
2. Komponenteninstanzen müssen korrekt übergeben werden; Verwenden Sie bei Bedarf die Funktion uni.nextTick().

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn uniapp $refs nicht abgerufen werden kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!