Zugriff auf Requisiten in vue Komponentendaten Funktion

Question

ich vorbei eine Requisiten auf eine Komponente:

<template> 
    {{messageId}} 
    // other html code 
</template> 

<script> 
    export default { 
     props: ['messageId'], 
     data: function(){ 
     var theData={ 
      // below line gives ReferenceError messageId is not defined 
      somevar: messageId, 
      // other object attributes 
     } 
     } 
    } 
</script> 

In obigen Code, ich habe die Linie kommentiert, die den Fehler verursacht. Wenn ich diese Zeile entferne, funktioniert sie wie normal und Vorlage rendert richtig (und ich kann auch den erwarteten Wert von {{messageId}} sehen). Daher ist die Logik zum Übergeben von Daten korrekt.

Es scheint, dass der Weg zu messageId in Daten() falsch ist. Also, wie kann ich auf die Requisiten messageId in Daten zugreifen?

Answer 1

Von der data()-Methode können Sie auf die Eigenschaften der Komponente verweisen, indem Sie this verwenden.

So in Ihrem Fall:

data: function() { 
    var theData = { 
    somevar: this.messageId, 
    // other object attributes 
    } 

    return theData; 
} 

Answer 2

Um eine Daten Eigenschaft gleich einem Requisiten zuordnen, können Sie Watcher verwenden, wie folgend:

<script> 
    export default { 
     props: ['messageId'], 
     data: function(){ 
     var theData={ 
      somevar: "", 
      // other object attributes 
     } 
     }, 
     watch: { 
     messageId: function(newVal) { 
      this.somevar = newVal 
     } 
     } 
    }