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指向 要慎重！！
特此记录~

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