Vuejs 3은 하위 구성 요소에서 상위 구성 요소로 이벤트를 내보냅니다.

Vuejs 3은 하위 구성 요소에서 상위 구성 요소로 이벤트를 내보냅니다.

최근에 VueJS와 작업을 시작했는데 v3를 사용하고 있는데 부모님께 메소드를 호출하는 데 문제가 있는 것 같습니다.아이의 방출 기능은 이벤트를 방출하지 않는 것 같고 부모에게서 아무것도 픽업되지 않습니다.

부모와 자식을 포함하여 어떻게 설정하는지 보여줍니다.

부모

<template>
  <First/>
  < Child v-bind:sample="sample" @enlarge-text="onEnlargeText"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import First from './First.vue';
import Child from './Child.vue';

export default defineComponent({
  name: 'Container',
  components: {
    First,
    Child,
  },
  methods: {
    onEnlargeText() {
      console.log('enlargeText');
    },
  },
  data: () => ({
    sample: [],
    parentmessage: '',
  }),
  created() {
    axios.get('http://localhost:8080/getData')
      .then((response) => {
        console.log(response);
        this.sample = response.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
});
</script>

어린아이

<template>
  <div id="add">
    <form id="signup-form" @submit.prevent="submit">
      <label for="text">Text:</label>
      <input type="text" v-model="text" required>
      <p class="error" >{{ error }}</p>
      <div class="field has-text-right">
        <button type="submit" class="button is-danger">Submit</button>
      </div>
    </form>
    <button v-on:click="tryThis">
      Enlarge text
    </button>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

interface SampleInterface {
  text: string;
  error: string;
}

export default defineComponent({
  name: 'Add',
  data: (): AddInterface => ({
    text: '',
    error: '',
  }),
  methods: {
    tryThis() {
      this.$emit('enlarge-text');
    },
    submit() {
      this.$emit('enlarge-text');
    },
  },
});
</script>

어떻게 해야 할까요?제가 놓친 게 있나요?

아직도 사용할 수 있는지 궁금합니다.$emit 네?

내보낸 이벤트 이름이 포함된 새 이름을 추가해야 합니다.

자식:

<template>
  <div id="child">
    <button v-on:click="tryThis">Enlarge text</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Child",
  emits: ["enlargeText"],
  methods: {
    tryThis() {
      console.log("trying");
      this.$emit("enlargeText", "someValue");
    },
  },
});
</script>

또는 스크립트 설정 구문을 사용합니다.

<template>
  <div id="child">
    <button v-on:click="tryThis">Enlarge text</button>
  </div>
</template>

<script lang="ts">

 const emit= defineEmits(["enlargeText"])
 
  function tryThis() {
      console.log("trying");
      emit("enlargeText", "someValue");
    }

</script>

상위:

<template>
  <div>
    <p>Container</p>
    <Child @enlargeText="onEnlargeText" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  name: "UrlContainer",
  components: {
    Child,
  },
  methods: {
    onEnlargeText() {
      console.log("enlarging text");
    },
  },
});
</script>

라이브 데모

또는 v-model 및 업데이트 이벤트를 사용할 수 있습니다.

// ChildComponent.vue
<template>
  <div>
    <input type="button" @click="increment" value="Click" />
    childCounter: {{ childCounter }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      childCounter:0
    }
  },
  methods: {
    increment() {
      // emit custom update event to update the parent value
      this.$emit('update:childCounter', ++this.childCounter);
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <div>
    <!-- basically means:
      <Child :childCounter="parentCounter" 
             @update:childCounter="(childCounter) => parentCounter = childCounter"
    />
    -->
    <Child v-model:childCounter="parentCounter"></Child>
    parentCounter: {{ parentCounter }}<br/>
  </div>
</template>

<script>
import Child from './ChildComponent.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentCounter: 0
    }
  },
}
</script>

언급URL : https://stackoverflow.com/questions/64605807/vuejs-3-emit-event-from-child-to-parent-component