Vue和VueRouter创建单独的组件的实例

我是使用Vue和Vue路由器的新手，但很容易找到。这是我目前遇到的问题。我有一个VueRouter设置和每个路径的组件。Vue和VueRouter创建单独的组件的实例

当我第一次加载我的应用程序时，我尝试做一个动作。在handView组件中，我点击一个按钮弹出一个模式，然后我点击模式上的按钮。这些都通过点击handView组件绑定到方法。我将console.log中的某些数据的值以及实例“this”按下时的值。这是第一次看起来像什么。

[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 117) 
[Log] 0 2 (self.js, line 118) 
[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 122) 
[Log] 0 2 (self.js, line 123)

第一个“0 2”来自激活模型的方法，第二个来自方法绑定到模式中的按钮点击。对于我正在查看的数据，它们都是0和2。他们应该都是一样的。

因此，然后我导航到另一个路线/组件，然后我再回来做同样的事情。结果如下。

[Log] VueComponent {_uid: 9, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 117) 
[Log] 0 3 (self.js, line 118) 
[Log] VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Proxy, _self: VueComponent, …} (self.js, line 122) 
[Log] 0 1 (self.js, line 123)

第一个（_uid：9），具有正确的值，但模态按钮（第二数）具有旧值仍然。我认为这与现在有两个单独的组件实例有关，即第一个日志中的_uid：5，现在有一个_uid：9.

为什么有一个新实例正在创建它似乎具有适当的值，并且为什么_uid：5在新的路由/组件被导航并返回后挂起？

我使用Vue的2.3.2，语义UI 2.2.10和jQuery 3.2.1

来源

2017-05-07 Red

听起来像一个'键'可以解决的问题，但看不到足够的代码推荐。你可以设置测试床吗？ – Bert

我有是没有上下文的问题，语义UI将移动模式是抱着股利之外Vue使用的应用程序元素。所以我的模态不在DOM之外，这就是为什么它为该组件创建了一个新实例，但旧模式仍然存在。解决方案是为模态声明一个上下文。（https://semantic-ui.com/modules/modal.html#/settings）

矿看起来是这样的：

beforeRouteEnter (to, from, next) { 
    next(function (vm) { 
    $(function() { 
     $("#player-selector").modal({ 
     context: "#router-view" 
     }) 
    }) 
    }); 
}

所以进入我设置的背景是，我以这种方式工作的股利路线之前我的无效/有效的模态本身不向外移动的。我正在使用的组件的上下文。这确实会导致一些与模式使用的调光器效应有关的问题。

来源

2017-05-10 01:07:31 Red

Vue和VueRouter创建单独的组件的实例

回答

相关问题