[Vue] 7. Vue構成部品の開発上級編-6)イベント/データを子構成部品から親構成部品に渡す

10437 ワード
vue テキストリンク

イベント/データを子コンポーネントから親コンポーネントに渡す


次に、イベントとデータをサブコンポーネントから親コンポーネントに渡す方法について説明します.this.$emitは、子コンポーネント内で親コンポーネントのイベントを生成できる関数です.
最初のパラメータは、親構成部品で定義されているカスタムイベント名です.
2番目のパラメータは、転送するデータです.
this.$emit("send-message", this.msg);
親コンポーネントからイベントを受信すると、@이벤트 이름と書き、イベントが発生したときに呼び出される関数を書きます.この関数のパラメータは、サブエレメントが伝達するデータを受信することができる.
<ChildComponent @send-message="sendMessage" />
sendMessage(data) {
      // alert(data);
      this.parentMsg = data;
    },
// ChildComponent.vue
<template>
  <div>
    <button type="button" @click="sendFromChild">자식 컴포넌트 버튼</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      msg: "자식 컴포넌트로부터 보내는 메시지",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    sendFromChild() {
      this.$emit("send-message", this.msg);
    },
  },
};
</script>

<style scoped></style>

// DataBindingExample.vue
<template>
  <div>
    <ChildComponent @send-message="sendMessage" />
    <h1>{{ parentMsg }}</h1>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMsg: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    sendMessage(data) {
      // alert(data);
      this.parentMsg = data;
    },
  },
};
</script>

<style scoped></style>
[Vue] 7. Vue素子の開発上級編-4)親素子上で子素子を実行する方法
[Vue] 7. Vueコンポーネント開発プレミアム編-9)Provide/Inject