đạo cụ Truy cập vào chức năng dữ liệu thành phần vue

Question

tôi đi qua một đạo cụ để một thành phần:

<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> 

Trong đoạn code trên, tôi đã nhận xét dòng cung cấp cho các lỗi. Nếu tôi xóa dòng đó, nó hoạt động như bình thường và mẫu sẽ hiển thị đúng (và tôi cũng có thể thấy giá trị mong đợi của {{messageId}}). Do đó logic để truyền dữ liệu là chính xác.

Dường như cách truy cập messageId trong dữ liệu() là sai. Vậy làm cách nào để truy cập vào các đạo cụ messageId trong dữ liệu?

Answer 1

Từ phương thức data(), bạn có thể tham chiếu thuộc tính của thành phần bằng cách sử dụng this.

Vì vậy, trong trường hợp của bạn:

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

    return theData; 
} 

Answer 2

Để gán một tài sản dữ liệu tương đương với một đạo cụ, bạn có thể sử dụng quan sát, như sau:

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