代码之家 › 专栏 › 技术社区 › Daniel F

使用$emit调用函数

vue.js

Daniel F · 技术社区 · 6 年前

我是新来的虚拟用户.js我想知道 $emit 可以使用。在下面的代码中,每个 input

我上个月的假设 输入 那是什么意思 $发射 使用事件名称与调用具有该事件名称的函数相同,但它不调用该函数。这个$emit发生了什么?

我已经通读了 Binding Native Events to Components https://youtu.be/7lpemgMhi0k?t=21m57s 你可以在幻灯片上看到这种用法。

下面是JSFiddle中的代码 https://jsfiddle.net/sbtmfweq/

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="test-app">
  <input v-model="text1" placeholder="edit me" @keyup.enter="submit"> {{ text1 }}
  <br><br>
  <input :value="text2" @input="inputEvent" @keyup.enter="submit"> {{ text2 }}
  <br><br>
  <input :value="text2" @input="inputEvent($event)" @keyup.enter="submit"> {{ text2 }}
  <br><br>
  <input :value="text2" @input="$emit('inputEvent', $event.target.value)"> {{ text2 }} | {{reversedText2}}
</div>

<script>

  new Vue({
    el: '#test-app',
    data: {
      text1: 'text1',
      text2: 'text2',
    },
    methods: {
      log: console.log,
      submit: function(event) {
        console.log("submit -->", event, event.target.value, '<--')
      },
      inputEvent: function(event) {
        console.log("input 2 -->", event.target.value, '<--')
        this.text2 = event.target.value
      },
    },
    watch: {
      text1: {
        handler: function(newValue, oldValue) {
          console.log("input 1 -->", newValue, '<-->', oldValue, '<--')
        }
      }
    },
    computed: {
      reversedText2: function () {
        return this.text2.toUpperCase()
      }
    }
  })

</script>

3 回复 | 直到 6 年前

Ankit Kumar Ojha 6 年前

这只是个简单的问题。无论何时分派事件,都必须向其添加侦听器。在$emit中,第一个参数实际上是事件的名称。

vm.$emit(事件名称,[args])

在下面的代码中,我使用$on添加了一个事件侦听器。我还将arg改为$emit。

  <input :value="text2" @input="$emit('inputEvent', $event)"> {{ text2 }} | {{reversedText2}}

<script>

  new Vue({
    ...
    created(){
        this.$on('inputEvent', this.inputEvent);
    }
    ...
  })

</script>

希望对你有帮助。

Decade Moon 6 年前

$emit 像这样工作。

假设你有两个组件, <parent> <child> <儿童> 在里面 <家长> 的模板。

什么时候? <儿童> 发出一个事件,它可以由 <家长> 仅组件(除非您通过 $on ,但这与您的场景无关)。在你的代码里 $发射 new Vue() );也就是说,父组件是发出事件的组件。根组件没有父组件,因此emit调用没有意义。

我上个月的假设 input 使用事件名称 ,但它不调用该函数。

Thomas Lombart 6 年前

这很正常 $emit 对你来说不管用。

$发射 用于父组件和子组件之间的通信。这里,你用的是 $发射

docs 对于自定义事件。

希望有帮助!