vue2 中 data 数据定义为 data的数据时, 方法里会取不到data?-灵析社区

文文问问

vue2(2.16.14) 中 data 数据定义为 data(`this.xxx`)的数据时, 方法里会取不到data? > 这是一个有趣的问题,我暂时还没有去探究原因,不过可以给大家避坑。 我有个 `test.vue` 组件 export default { name: 'test', data () { return { tabList: [{ label: '哈哈哈', value: 'hahaha' }, { label: '嘿嘿嘿', value: 'heiheihei' }], tab: this.tabList[0].value, } }, created() { console.log(this.tabList); this.show("created"); }, methods: { show(form) { console.log(`来自 ${ form }-- show被调用: `, this, 'tabList: ', this.tabList, 'tab: ',this.tab, 'method: ', this.test); }, test() { console.log(1111); } } } 我在其父组件中通过 `this.$refs.test.show('父组件')` 调用该方法时发现 this.data 为undefined,后面发现组件自身调用也存在这个问题。 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241004/8d99370ec415c79c3b7105106e2fa31b.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241004/37a6197bed9364023e54b3915bd827b3.png) 然而方法却能取到,暂时做个记录(如有大佬帮忙解开迷雾,十分感谢。

阅读量:147

点赞量:0

问AI
"this"指的是什么?是不是当前"vue"实例? "this.tabList"指的是什么?是不是"data()"中"return"的"tabList"属性? 在还没"return"的对象里访问对象中的属性会怎样?会收获"undefined is not an object (evaluating 'this.tabList[0]')"报错一枚。 这与"vue"无关,你的行为就好似下面这段JS: var data = { tabList: [{ label: '哈哈哈', value: 'hahaha' }, { label: '嘿嘿嘿', value: 'heiheihei' }], tab: data.tabList[0].value }