Question

我正在阅读一些要更新的代码，

weather-component (table th, table td) {
    text-align: center !important;
}

@input =“ $ emit（'input'，$ event）”代表什么？我在哪里以及如何收听输入事件？

Answer 1

@input是v-on:input的简写，它绑定到组件的input事件。 vm.$emit已记录在here中，并有一个具有类似用例here的示例。

在您的情况下，您的组件仅发出一个事件，该事件的名称和参数与其从子项b-input接收到的事件相同。您可以通过编程方式使用vm.$on收听这些事件，例如在您的mounted方法中：

export default {
  components: { BInput },

  mounted () {
    this.$on('input', (event) => {
      console.log(event);
    });
  }
}

Answer 2

$ emit是传递给其他组件（例如）的数据。

  Component: getEmit.vue
    <template>
      <!--get data-->
      <button-emit v-on:data="getValue"></button-emit>
    </template>
    <script>
      import buttonEmit from './buttonEmit'
      export default {
        name: 'getEmit',
        components: { buttonEmit },
        methods: {
          // get payload in parameter
          getValue(event){
            alert('Get Emit Success' + event)
          }
        }
      }
    </script>

    Component: buttonEmit.vue
    <template>
      <button @click="emit($event)"></button>
    </template>
    <script>
      export default {
        name: 'buttonEmit',
        methods: {
          emit(event) {
    // Emit text data the payload event
            this.$emit('data', event)
          }
        }
      }
    </script>

@input =“ $ emit（'input'，$ event）”在vue组件中是什么意思？

2 个答案: