Question

我有一个组件Abc.vue，我想从这里发出事件并将其收听到js文件而不是其他组件中，我该怎么做？

<template>
  <div class="hello">
    <div>
      <input v-model="clickCount" placeholder="edit me" v-on:change="emitGlobalClickEvent()">
    </div>
    <TestWorld></TestWorld>
  </div>
</template>

<script>
import TestWorld from '@/components/TestWorld.vue'
import {bus} from '../main'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message: 'test',
      clickCount: ''
    }
  },
  methods: {
    emitGlobalClickEvent () {
      bus.$emit('i-got-clicked', this.clickCount);

    }
  },
  components: {
    TestWorld
  }
}
</script>

我想在abc.js文件上听这个，因为我在下面使用但是在我能够在组件中使用时无法工作

import { bus } from '../main'

bus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Answer 1

您正在使用事件中心模式，因此您的代码可以正常运行。

CodeSandbox Demo here

有些观点可能会阻止您看到监听器（$on）工作：

监听器在abc.js中声明。简单地声明它并不能保证它被执行。 确保abc.js已导入某处，以便执行代码并正确注册侦听器。
$emit事件代码由v-on:change上的方法触发。对于<input> s，change事件发生在input失去焦点而非打字时。 char发生char的事件是input（或key*事件，自然而然）。因此，键入一些文字，然后关注input 以查看触发的事件。
如果您的问题代码只是一个演示而且触发该事件的代码是另一个.js文件，请确保它在<{strong> {/ 1}}之后执行。

demo above处理这些案件。

我想在vue js中将数据从组件传递到js文件（而不是在其他组件中）。我能够在组件中访问它，但不能在js文件中访问它

1 个答案: