vue組件內變量不能以下划線開頭

封裝組件內data變量不能以“_”開頭，如以下組件：

<template>
  <div>
    <div v-for="item in _dataSource" :key="item.name"> {{item.name}} </div>
  </div>
</template>
<script> export default { name: 'Tables', props: { dataSource: { type: Array, default() { return [] } }, }, data() { return { _dataSource: [] } }, watch: { dataSource: { immediate: true, handler(newVal) { this._dataSource = newVal },
 }, } } </script>

調用：

<template>
  <div>
    <tables :data-source="dataSource" />
  </div>
</template>
<script>
import Tables from '@/components/Tables'

export default {
  components: {
    Tables
  },
  data() {
    return {
      dataSource: [{
　　　　　name:'測試數據‘
　　　 },{
　　　　name:'測試數據'
　　　 }],
    }
  },
}
</script>

 

結果是無論如何顯示不出來值

最終通過查找資料發現官網有如下規定：

 

解決方法：去掉下划線，如更改為DataSource即可解決