Каково возвращаемое значение this.$emit() в vue?

Vue.js

Каково возвращаемое значение this.$emit(); в #vue

Три основных атрибута в vue: атрибуты, события, слоты, --- события

в случае

  1. Обычные события: события @click/@input/@change/@xxx...;

  2. События модификатора: @input.trim, @click.stop, @submit.prevent... обычно используются для нативных html-элементов;

    Ответ: В vue this.$emit() возвращается значение this;

Пример кода:

В дочернем компоненте: Event.vue: получите свойство props:{name:String}, переданное через родительский компонент; Во входном теге:

  1. значение=имя, привязать атрибут имени;
  2. Через обычные события @change="handleChange" слушайте значение ввода поля ввода;

В теге script:

  1. Через this.$emit("Обмен", e.target.value, val => { console.log(val); }); Передать значение родительскому компоненту через обратный вызов, пользовательское событие "Echange";
 <template>
  <div>
name: {{ name || "--" }}
<br />
<input :value="name" @change="handleChange" />
<br />
<br />
<div @click="handleDivClick">
  <button @click="handleClick">重置成功</button>&nbsp;&nbsp;&nbsp;
  <button @click.stop="handleClick">重置失败</button>
</div>
  </div>
</template>

<script>
export default {
  name: "EventDemo",
  props: {
name: String
  },
  methods: {
handleChange(e) {
  const res = this.$emit("Echange", e.target.value, val => {
console.log(val);
  });
  console.log(res, res === this);
},
handleDivClick() {
  this.$emit("change", "");
},
handleClick(e) {
  // 都会失败
  e.stopPropagation();
}
  }
};
</script>

В родительском компоненте ответьте на обратный вызов, прослушивая событие дочернего компонента;

  1. Родительский компонент может передать значение дочернему компоненту через функцию обратного вызова callback();
<template>
    
      <Event :name="name" @Echange="handleEventChange" />
    
    </template>
    
    <script>
    import Event from "./Event";
    
    export default {
      components: {
    Event,
      
      },
      data: () => {
    return {
      name: "",
     
    };
      },
      mounted() {
    
      },
      methods: {
      
    handleEventChange(val, callback) {
      this.name = val;
      callback("hello");
      return "hello";
    }
      }
    };
    </script>
Категории