如何从标准 JS 访问 Vue 组件？

Question

How can I get access to a component's data via a window.addEventListener?如何通过 window.addEventListener 访问组件的数据？ I want to hit the 'g' key and hide the Vue component test.我想按“g”键并隐藏 Vue 组件测试。

JS: JS：

window.onload = function () {
  Vue.component('test', {
    template: `<div id="box" v-if="visible"></div>`,
    data() {
      return {
        visible: true
      }
    }
  })
  var app = new Vue({
    el: '#app'
  });
  window.addEventListener('keydown', (e) => {
    if (e.key == 'g') {
      //set test.visible = false
    }
  });
  window.app = app;
}

HTML: HTML：

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="code.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
  <div id="app">
    <test></test>
  </div>
</body>
</html>

Answer 1

Add the listener in the created component's life cycle hook .在created的组件的生命周期钩子中添加监听器。 This will give you access to the instance, including the visible data property.这将使您能够访问实例，包括visible数据属性。

Make sure to also remove the listener once your component is destroyed.确保在您的组件被销毁后也删除侦听器。

 window.onload = function() { Vue.component('test', { template: `<div id="box" v-if="visible"></div>`, data() { return { visible: true } }, created() { window.addEventListener('keydown', this.visibilityHandler) }, destroyed() { window.removeEventListener('keydown', this.visibilityHandler) }, methods: { visibilityHandler(e) { if (e.key == 'g') { this.visible = false } } }, }); var app = new Vue({ el: '#app' }); window.app = app; }

 #box { width: 100px; height: 100px; border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <test></test> </div>

Answer 2

Put the logic inside of the component:将逻辑放在组件内部：

Vue.component('test', {
  template: `<div id="box" v-if="visible"></div>`,
  data() {
    return {
      visible: true
    }
  },
  mounted() {
    window.addEventListener('keydown', (e) => {
      if (e.key == 'g') {
        this.visible = false
      }
    });
  }
})

如何从标准 JS 访问 Vue 组件？

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-04-30 16:59:28

解决方案2
1 2019-04-30 16:52:51

如何从标准 JS 访问 Vue 组件？

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-04-30 16:59:28

解决方案2 1 2019-04-30 16:52:51

解决方案1
2 已采纳 2019-04-30 16:59:28

解决方案2
1 2019-04-30 16:52:51