[Vue] 7. Vue構成部品の開発上級編-6)イベント/データを子構成部品から親構成部品に渡す
イベント/データを子コンポーネントから親コンポーネントに渡す
次に、イベントとデータをサブコンポーネントから親コンポーネントに渡す方法について説明します.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>
Reference
この問題について([Vue] 7. Vue構成部品の開発上級編-6)イベント/データを子構成部品から親構成部品に渡す), 我々は、より多くの情報をここで見つけました
https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-6-자식-컴포넌트에서-부모-컴포넌트로-이벤트데이터-전달하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
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>
Reference
この問題について([Vue] 7. Vue構成部品の開発上級編-6)イベント/データを子構成部品から親構成部品に渡す), 我々は、より多くの情報をここで見つけました https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-6-자식-컴포넌트에서-부모-컴포넌트로-이벤트데이터-전달하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol