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

Question

我刚开始使用 Vue 和 Vue Router，但它很容易上手。这是我目前遇到的问题。我设置了一个 VueRouter 并为每个路径设置了一个组件。

当我第一次加载我的应用程序时，我尝试执行一个操作。在 handView 组件中，我点击了一个弹出模式的按钮，然后点击了模式上的按钮。通过单击 handView 组件，这两个方法都可以绑定(bind)到方法。当按下某些数据和实例“this”时，我console.log记录它们的值。这是第一次的样子。

[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”来自激活模型的方法，第二个来自绑定(bind)到模式中按钮单击的方法。对于我正在查看的数据，两者都读取 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、Semantic UI 2.2.10 和 Jquery 3.2.1

Answer 1

我遇到的问题是没有上下文，语义 UI 会将模式移到保存 Vue 正在使用的应用程序元素的 div 之外。所以我的模态位于 DOM 之外，这就是为什么它为组件创建了一个新实例，但旧实例仍然存在于模态中。解决方案是声明模式的上下文。 (https://semantic-ui.com/modules/modal.html#/settings)

我的看起来像这样:

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

因此，在进入路线之前，我将上下文设置为我正在使用的 div。这样，我的非事件/事件模式就不会将其自身移动到我正在使用的组件的上下文之外。这确实导致模态使用的调光效果出现一些问题。