Emit が分からない! Vue.js で ref や computed でのステート管理を学び、コンポーネント間でのやり取りで props を学び、次に emit を学ぼうとするとなんだか難しく感じることがあります。 確かに初学者の方からすると、慣れるまで少し時間がかかるかもしれません。 でも大丈夫です。 この記事では図でのイメージとあなたが既に知っているはずの知識を使って emit を理解するためのヒントを提供します。 基本のキ とりあえず emit の基本をおさらいします。 <!-- ChildComponent.vue --> <script setup lang="ts"> const emit = defineEmits<{ "my-event": [] }>(); function handleClick() { emit("my-event"); } </script> <
![【Vue.js】イメージとアナロジーとヒストリーで理解する Component Emits](https://cdn-ak-scissors.b.st-hatena.com/image/square/50186abb5bcfe7bff5b0c93b4c0b0436b91d3883/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--PklgVPm4--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590Vue.js%2525E3%252580%252591%2525E3%252582%2525A4%2525E3%252583%2525A1%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252581%2525A8%2525E3%252582%2525A2%2525E3%252583%25258A%2525E3%252583%2525AD%2525E3%252582%2525B8%2525E3%252583%2525BC%2525E3%252581%2525A8%2525E3%252583%252592%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252583%2525BC%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252520Component%252520Emits%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AVue%252520Beginners%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JjNzI5NGQ3YWQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)