javascript - vue 中this的指向问题
本文介绍了javascript - vue 中this的指向问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
场景:一个<component></component>里边is的值有三种:Home,Login,reg
Home组件中有a标签,点击跳转到Login,我希望能实现组件的切换效果。该如何实现?
一下是示例代码,我用的是自定义函数,希望能够从子组件改变父组件的 currentView ,可惜pfun中的this指向却是vue$3,麻烦帮忙解答,感谢。
代码如下:
<h4>动态组件</h4>
<div id="app">
<component v-on:jump="pfun" v-bind:is="currentView"></component>
</div>
<script>
var Home = {
props:['curr'],
template:'<div>\
Home\
<p><a v-on:click="cfun">登陆</a></p>\
</div>',
methods:{
cfun:function() {
this.$emit('jump', 'Login');
}
}
};
var Login = {
template:'<div>Login</div>'
};
var Reg = {
template:'<div>Reg</div>'
};
var app = new Vue({
el: '#app',
data:{
currentView:Home
},
methods:{
pfun:function(path) {
this.currentView = path;//这里想切换组件的显示该怎么做 ?
}
}
});
解决方案
不是this 指向的问题 ,你的组件没注册, 可以看一下官方文档 https://vuefe.cn/api/#Vue-com...
http://jsbin.com/fujucurusa/e...
这篇关于javascript - vue 中this的指向问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文