鍍金池/ 問答/HTML/ Vue 組件中 data 和computed找不到props，然而methods

Vue 組件中 data 和computed找不到props，然而methods可以，怎么辦？(用的Typescript)

環(huán)境

"dependencies": {
    "cross-spawn": "^5.1.0",
    "vue": "2.5.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

直接上代碼

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
  props: {
      inita:Number
  },
  data:function(){
      return {
          a:function(){
              return this.inita
          }
      }
      },
  computed:{
      b:function(){
          return this.inita;
      }
  },
  methods:{
      c:function(){
          return this.inita;
      }
  }
})
</script>

問題

clipboard.png

報(bào)錯(cuò)：Property 'inita' does not exist on type '{ a: () => any; }'
報(bào)錯(cuò)：Property 'inita' does not exist on type '{ b: () => any; }'
然而methods就沒問題

回答
編輯回答
拼未來

八成是vue本身的 bug 吧，它才剛開始支持typescript，會(huì)出些莫名的問題不奇怪。

我個(gè)人是推薦直接上vue-class-component的，我自己也是這么寫的，用標(biāo)準(zhǔn)的類寫法來寫組件，就沒有這些問題了。

2017年8月4日 02:15
編輯回答
孤毒

樓上的答案都不正確，這是ts類型檢查的問題，報(bào)錯(cuò)很明顯的告訴你，a函數(shù)和b函數(shù)的返回值默認(rèn)是any，所以你要指定a函數(shù)和b函數(shù)的返回值的類型就好了，在data函數(shù)里面不需要再用函數(shù)來返回一個(gè)值，直接this.inita獲取就好了

a: this.inita

b: function(): Number{
    return this.inita
}
2017年11月1日 03:29
編輯回答
孤酒

試試箭頭函數(shù)，感覺像是this指向的問題

2018年2月3日 04:16
編輯回答
青檸
Vue 實(shí)例的數(shù)據(jù)對象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。對象必須是純粹的對象 (含有零個(gè)或多個(gè)的 key/value 對)：瀏覽器 API 創(chuàng)建的原生對象，原型上的屬性會(huì)被忽略。大概來說，data 應(yīng)該只能是數(shù)據(jù) - 不推薦觀察擁有狀態(tài)行為的對象。

你的c不應(yīng)該是個(gè)函數(shù)，既然你可以在methods里改變也可以computed，為甚把c定義為一個(gè)函數(shù)呢？

2017年10月16日 05:19