vue中复用组件时出现的数据被覆盖的问题~已解决

项目需要,写了一个能够复用的Cascader 组件,偶然间发现了一个久远的bug…
我此时的Cascader 组件并没有加懒加载。

demo复现:
在一个页面中放入两个一模一样的组件,第一个组件始终没有数据,然而第二个时有数据展现的:
在这里插入图片描述
在这里插入图片描述
第二个组件明明是有数据的,可偏偏第一个没有;

代码粘上:

<el-cascader
	:style="{width: width}"
	ref="cascader"
	:value="value"
	:options="treeListPeople"
	:props="props_value"
	clearable
	:show-all-levels="false"
	:placeholder="placeholder"
	@change="change">
	<template slot-scope="{ data }">
		<span>{{ data.title }}</span>
		<span v-if="data.children"> ({{ data.children.length }}) </span>
	</template>
</el-cascader>
getTree(){
	self.$post('get_company_tree',{id: 1, type:1}).then(res=>{
		self.treeListPeople = JSON.parse(JSON.stringify(res.data));
	}).catch(err=>{})
},

后来在网上一通的搜啊,大部分说的是使用这种方式解决:

<component is="van-button" type="default">默认按钮</component >
<component is="van-button" type="primary">主要按钮</component >

试过之后并没有解决我的问题,然后又是一通的搜,路漫漫其修远兮…人生路~
在网上就根本没有我的这个问题!!!

那一天,天气格外的晴朗,
日光透过窗户打在了我消瘦的脸上,
就像 佛光普照,
突然 灵光一闪…
大脑一片空白, 仿佛有几个字符出现在我的脑海中…
this
就是它… 就是它
在我脑海中不断出现的就是它—— “this”

…会不会是两个组件共用了一个this导致数据被覆盖了呢,因为我代码中确实写了self,

created () {
	self = this;
},

关键是这一句:

self.treeListPeople = JSON.parse(JSON.stringify(res.data));

把self直接换成this就可以了。

this.treeListPeople = JSON.parse(JSON.stringify(res.data));

终于解决了! 哈哈哈,世上无难事,只怕有心人。

原来是因为我加载组件created时把this赋值给了self, 所以两个组件共用了一个this, 才会出现只有一个组件有数据的问题。
在组件中的this指向的是当前组件本身,不能共用,如果想数据共享的话当我没说。
所以子组件中重新修改this指向 要慎重!!
特此记录~

以上是我的个人总结和观点,不对的地方大家指出来,方便共同进步~~

Logo

前往低代码交流专区

更多推荐