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即可解决