v_this只是一个变量名,this代表父函数,如果在子函数还用this,this的指向就变成子函数了,v_this就是用来存储指向的。
普通函数中的this表示调用此函数时的对象,箭头函数里面的this会继承自外部的this,普通函数中的this并不会向上继续找对象,箭头函数中会往上寻找this,直到找到所代表的this为止
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind
普通函数的this指向调用它的那个对象
举个例子
在开发中遇到了这样的问题,需要点击echarts图表对应的数据然后t跳转到详情页,具体功能是这样
methods:{
Chart(){
var option = {
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的搜索页面
myChart.on('click', function(params) {
this.$router.push({path:'/detiles',query:{name:params.name}})
});
}
}
这个时候就出现了报错,意思是push方法未定义,那肯定就是this.$router没有找到。
我们可以这样改一下
// 全局定义v-this
let v_this
mounted(){
v_this=this
}
methods:{
Chart(){
var option = {
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且跳转到相应的搜索页面
myChart.on('click', function(params) {
v_this.$router.push({path:'/detiles',query:{name:params.name}})
});
}
}
这样就可以找到this.$router,正常的进行跳转。