Vue 和 Vue Router 创建独立的组件实例

Question

我是 Vue 和 Vue Router 的新手，但上手很容易。这是我目前遇到的问题。我为每个路径设置了一个 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。他们应该是一样的。

然后我导航到另一个 route/component，然后我回来再次做完全相同的事情。这是结果。

[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 在导航到新的 route/component 并从中返回后挂在上面？

我正在使用 Vue 2.3.2、语义 UI 2.2.10 和 Jquery 3.2.1

Answer 1

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

我的看起来像这样：

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

所以在进入路线之前，我将上下文设置为我正在工作的 div。这样我的 inactive/active 模态就不会在我正在使用的组件的上下文之外移动.这确实导致模态使用的调光效果出现一些问题。

Vue 和 Vue Router 创建独立的组件实例

Vue and VueRouter creating separate instances of components

javascript

jquery

vue.js

vue-router

vuejs2