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屋！