[{"data":1,"prerenderedAt":1167},["ShallowReactive",2],{"content-hero-\u002Fcodesnippets\u002Fvue\u002Fbubble-up-event-composition-api":3,"content-query-C7CfNL6kNC":6},{"title":4,"imageUrl":5},"How to bubble up event in Composition Api Vue 3","\u002Fimages\u002Fthumbnails\u002Flogo_maximilien_zakowski_240x240.gif",{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":4,"description":11,"imageUrl":5,"body":12,"_type":1161,"_id":1162,"_source":1163,"_file":1164,"_stem":1165,"_extension":1166},"\u002Fcodesnippets\u002Fvue\u002Fbubble-up-event-composition-api","vue",false,"","Naive re-emits through intermediate components versus forwarding with $attrs in Vue 3 Composition API.",{"type":13,"children":14,"toc":1153},"root",[15,24,31,339,345,623,629,846,852,1147],{"type":16,"tag":17,"props":18,"children":20},"element","h2",{"id":19},"the-naive-way-to-do-it",[21],{"type":22,"value":23},"text","The naive way to do it…",{"type":16,"tag":25,"props":26,"children":28},"h3",{"id":27},"child-component-event-bubbled-from",[29],{"type":22,"value":30},"Child component (event bubbled from)",{"type":16,"tag":32,"props":33,"children":36},"pre",{"className":34,"code":35,"language":8,"meta":10,"style":10},"language-vue shiki shiki-themes github-light github-dark","\u003C!-- ChildComponent.vue -->\n\u003Ctemplate>\n  \u003Cbutton @click=\"handleClick\">Click Me!\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { defineEmits } from 'vue'\n\nconst emits = defineEmits(['clicked'])\n\nfunction handleClick() {\n  emits('clicked', 'Some data')\n}\n\u003C\u002Fscript>\n",[37],{"type":16,"tag":38,"props":39,"children":40},"code",{"__ignoreMap":10},[41,53,74,132,149,159,181,206,214,254,262,281,314,323],{"type":16,"tag":42,"props":43,"children":46},"span",{"class":44,"line":45},"line",1,[47],{"type":16,"tag":42,"props":48,"children":50},{"style":49},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[51],{"type":22,"value":52},"\u003C!-- ChildComponent.vue -->\n",{"type":16,"tag":42,"props":54,"children":56},{"class":44,"line":55},2,[57,63,69],{"type":16,"tag":42,"props":58,"children":60},{"style":59},"--shiki-default:#24292E;--shiki-dark:#E1E4E8",[61],{"type":22,"value":62},"\u003C",{"type":16,"tag":42,"props":64,"children":66},{"style":65},"--shiki-default:#22863A;--shiki-dark:#85E89D",[67],{"type":22,"value":68},"template",{"type":16,"tag":42,"props":70,"children":71},{"style":59},[72],{"type":22,"value":73},">\n",{"type":16,"tag":42,"props":75,"children":77},{"class":44,"line":76},3,[78,83,88,93,99,104,110,115,119,124,128],{"type":16,"tag":42,"props":79,"children":80},{"style":59},[81],{"type":22,"value":82},"  \u003C",{"type":16,"tag":42,"props":84,"children":85},{"style":65},[86],{"type":22,"value":87},"button",{"type":16,"tag":42,"props":89,"children":90},{"style":59},[91],{"type":22,"value":92}," @",{"type":16,"tag":42,"props":94,"children":96},{"style":95},"--shiki-default:#6F42C1;--shiki-dark:#B392F0",[97],{"type":22,"value":98},"click",{"type":16,"tag":42,"props":100,"children":101},{"style":59},[102],{"type":22,"value":103},"=",{"type":16,"tag":42,"props":105,"children":107},{"style":106},"--shiki-default:#032F62;--shiki-dark:#9ECBFF",[108],{"type":22,"value":109},"\"",{"type":16,"tag":42,"props":111,"children":112},{"style":59},[113],{"type":22,"value":114},"handleClick",{"type":16,"tag":42,"props":116,"children":117},{"style":106},[118],{"type":22,"value":109},{"type":16,"tag":42,"props":120,"children":121},{"style":59},[122],{"type":22,"value":123},">Click Me!\u003C\u002F",{"type":16,"tag":42,"props":125,"children":126},{"style":65},[127],{"type":22,"value":87},{"type":16,"tag":42,"props":129,"children":130},{"style":59},[131],{"type":22,"value":73},{"type":16,"tag":42,"props":133,"children":135},{"class":44,"line":134},4,[136,141,145],{"type":16,"tag":42,"props":137,"children":138},{"style":59},[139],{"type":22,"value":140},"\u003C\u002F",{"type":16,"tag":42,"props":142,"children":143},{"style":65},[144],{"type":22,"value":68},{"type":16,"tag":42,"props":146,"children":147},{"style":59},[148],{"type":22,"value":73},{"type":16,"tag":42,"props":150,"children":152},{"class":44,"line":151},5,[153],{"type":16,"tag":42,"props":154,"children":156},{"emptyLinePlaceholder":155},true,[157],{"type":22,"value":158},"\n",{"type":16,"tag":42,"props":160,"children":162},{"class":44,"line":161},6,[163,167,172,177],{"type":16,"tag":42,"props":164,"children":165},{"style":59},[166],{"type":22,"value":62},{"type":16,"tag":42,"props":168,"children":169},{"style":65},[170],{"type":22,"value":171},"script",{"type":16,"tag":42,"props":173,"children":174},{"style":95},[175],{"type":22,"value":176}," setup",{"type":16,"tag":42,"props":178,"children":179},{"style":59},[180],{"type":22,"value":73},{"type":16,"tag":42,"props":182,"children":184},{"class":44,"line":183},7,[185,191,196,201],{"type":16,"tag":42,"props":186,"children":188},{"style":187},"--shiki-default:#D73A49;--shiki-dark:#F97583",[189],{"type":22,"value":190},"import",{"type":16,"tag":42,"props":192,"children":193},{"style":59},[194],{"type":22,"value":195}," { defineEmits } ",{"type":16,"tag":42,"props":197,"children":198},{"style":187},[199],{"type":22,"value":200},"from",{"type":16,"tag":42,"props":202,"children":203},{"style":106},[204],{"type":22,"value":205}," 'vue'\n",{"type":16,"tag":42,"props":207,"children":209},{"class":44,"line":208},8,[210],{"type":16,"tag":42,"props":211,"children":212},{"emptyLinePlaceholder":155},[213],{"type":22,"value":158},{"type":16,"tag":42,"props":215,"children":217},{"class":44,"line":216},9,[218,223,229,234,239,244,249],{"type":16,"tag":42,"props":219,"children":220},{"style":187},[221],{"type":22,"value":222},"const",{"type":16,"tag":42,"props":224,"children":226},{"style":225},"--shiki-default:#005CC5;--shiki-dark:#79B8FF",[227],{"type":22,"value":228}," emits",{"type":16,"tag":42,"props":230,"children":231},{"style":187},[232],{"type":22,"value":233}," =",{"type":16,"tag":42,"props":235,"children":236},{"style":95},[237],{"type":22,"value":238}," defineEmits",{"type":16,"tag":42,"props":240,"children":241},{"style":59},[242],{"type":22,"value":243},"([",{"type":16,"tag":42,"props":245,"children":246},{"style":106},[247],{"type":22,"value":248},"'clicked'",{"type":16,"tag":42,"props":250,"children":251},{"style":59},[252],{"type":22,"value":253},"])\n",{"type":16,"tag":42,"props":255,"children":257},{"class":44,"line":256},10,[258],{"type":16,"tag":42,"props":259,"children":260},{"emptyLinePlaceholder":155},[261],{"type":22,"value":158},{"type":16,"tag":42,"props":263,"children":265},{"class":44,"line":264},11,[266,271,276],{"type":16,"tag":42,"props":267,"children":268},{"style":187},[269],{"type":22,"value":270},"function",{"type":16,"tag":42,"props":272,"children":273},{"style":95},[274],{"type":22,"value":275}," handleClick",{"type":16,"tag":42,"props":277,"children":278},{"style":59},[279],{"type":22,"value":280},"() {\n",{"type":16,"tag":42,"props":282,"children":284},{"class":44,"line":283},12,[285,290,295,299,304,309],{"type":16,"tag":42,"props":286,"children":287},{"style":95},[288],{"type":22,"value":289},"  emits",{"type":16,"tag":42,"props":291,"children":292},{"style":59},[293],{"type":22,"value":294},"(",{"type":16,"tag":42,"props":296,"children":297},{"style":106},[298],{"type":22,"value":248},{"type":16,"tag":42,"props":300,"children":301},{"style":59},[302],{"type":22,"value":303},", ",{"type":16,"tag":42,"props":305,"children":306},{"style":106},[307],{"type":22,"value":308},"'Some data'",{"type":16,"tag":42,"props":310,"children":311},{"style":59},[312],{"type":22,"value":313},")\n",{"type":16,"tag":42,"props":315,"children":317},{"class":44,"line":316},13,[318],{"type":16,"tag":42,"props":319,"children":320},{"style":59},[321],{"type":22,"value":322},"}\n",{"type":16,"tag":42,"props":324,"children":326},{"class":44,"line":325},14,[327,331,335],{"type":16,"tag":42,"props":328,"children":329},{"style":59},[330],{"type":22,"value":140},{"type":16,"tag":42,"props":332,"children":333},{"style":65},[334],{"type":22,"value":171},{"type":16,"tag":42,"props":336,"children":337},{"style":59},[338],{"type":22,"value":73},{"type":16,"tag":25,"props":340,"children":342},{"id":341},"intermediate-component",[343],{"type":22,"value":344},"Intermediate component",{"type":16,"tag":32,"props":346,"children":348},{"className":34,"code":347,"language":8,"meta":10,"style":10},"\u003C!-- IntermediateComponent.vue -->\n\u003Ctemplate>\n  \u003CChildComponent @clicked=\"handleClicked\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport ChildComponent from '.\u002FChildComponent.vue'\nimport { defineEmits } from 'vue'\n\nconst emits = defineEmits(['clicked'])\n\nfunction handleClicked(data) {\n  \u002F\u002F Bubble up the event to the parent of the WrapperComponent\n  emits('clicked', data)\n}\n\u003C\u002Fscript>\n",[349],{"type":16,"tag":38,"props":350,"children":351},{"__ignoreMap":10},[352,360,375,418,433,440,459,480,499,506,537,544,571,579,599,607],{"type":16,"tag":42,"props":353,"children":354},{"class":44,"line":45},[355],{"type":16,"tag":42,"props":356,"children":357},{"style":49},[358],{"type":22,"value":359},"\u003C!-- IntermediateComponent.vue -->\n",{"type":16,"tag":42,"props":361,"children":362},{"class":44,"line":55},[363,367,371],{"type":16,"tag":42,"props":364,"children":365},{"style":59},[366],{"type":22,"value":62},{"type":16,"tag":42,"props":368,"children":369},{"style":65},[370],{"type":22,"value":68},{"type":16,"tag":42,"props":372,"children":373},{"style":59},[374],{"type":22,"value":73},{"type":16,"tag":42,"props":376,"children":377},{"class":44,"line":76},[378,382,387,391,396,400,404,409,413],{"type":16,"tag":42,"props":379,"children":380},{"style":59},[381],{"type":22,"value":82},{"type":16,"tag":42,"props":383,"children":384},{"style":65},[385],{"type":22,"value":386},"ChildComponent",{"type":16,"tag":42,"props":388,"children":389},{"style":59},[390],{"type":22,"value":92},{"type":16,"tag":42,"props":392,"children":393},{"style":95},[394],{"type":22,"value":395},"clicked",{"type":16,"tag":42,"props":397,"children":398},{"style":59},[399],{"type":22,"value":103},{"type":16,"tag":42,"props":401,"children":402},{"style":106},[403],{"type":22,"value":109},{"type":16,"tag":42,"props":405,"children":406},{"style":59},[407],{"type":22,"value":408},"handleClicked",{"type":16,"tag":42,"props":410,"children":411},{"style":106},[412],{"type":22,"value":109},{"type":16,"tag":42,"props":414,"children":415},{"style":59},[416],{"type":22,"value":417}," \u002F>\n",{"type":16,"tag":42,"props":419,"children":420},{"class":44,"line":134},[421,425,429],{"type":16,"tag":42,"props":422,"children":423},{"style":59},[424],{"type":22,"value":140},{"type":16,"tag":42,"props":426,"children":427},{"style":65},[428],{"type":22,"value":68},{"type":16,"tag":42,"props":430,"children":431},{"style":59},[432],{"type":22,"value":73},{"type":16,"tag":42,"props":434,"children":435},{"class":44,"line":151},[436],{"type":16,"tag":42,"props":437,"children":438},{"emptyLinePlaceholder":155},[439],{"type":22,"value":158},{"type":16,"tag":42,"props":441,"children":442},{"class":44,"line":161},[443,447,451,455],{"type":16,"tag":42,"props":444,"children":445},{"style":59},[446],{"type":22,"value":62},{"type":16,"tag":42,"props":448,"children":449},{"style":65},[450],{"type":22,"value":171},{"type":16,"tag":42,"props":452,"children":453},{"style":95},[454],{"type":22,"value":176},{"type":16,"tag":42,"props":456,"children":457},{"style":59},[458],{"type":22,"value":73},{"type":16,"tag":42,"props":460,"children":461},{"class":44,"line":183},[462,466,471,475],{"type":16,"tag":42,"props":463,"children":464},{"style":187},[465],{"type":22,"value":190},{"type":16,"tag":42,"props":467,"children":468},{"style":59},[469],{"type":22,"value":470}," ChildComponent ",{"type":16,"tag":42,"props":472,"children":473},{"style":187},[474],{"type":22,"value":200},{"type":16,"tag":42,"props":476,"children":477},{"style":106},[478],{"type":22,"value":479}," '.\u002FChildComponent.vue'\n",{"type":16,"tag":42,"props":481,"children":482},{"class":44,"line":208},[483,487,491,495],{"type":16,"tag":42,"props":484,"children":485},{"style":187},[486],{"type":22,"value":190},{"type":16,"tag":42,"props":488,"children":489},{"style":59},[490],{"type":22,"value":195},{"type":16,"tag":42,"props":492,"children":493},{"style":187},[494],{"type":22,"value":200},{"type":16,"tag":42,"props":496,"children":497},{"style":106},[498],{"type":22,"value":205},{"type":16,"tag":42,"props":500,"children":501},{"class":44,"line":216},[502],{"type":16,"tag":42,"props":503,"children":504},{"emptyLinePlaceholder":155},[505],{"type":22,"value":158},{"type":16,"tag":42,"props":507,"children":508},{"class":44,"line":256},[509,513,517,521,525,529,533],{"type":16,"tag":42,"props":510,"children":511},{"style":187},[512],{"type":22,"value":222},{"type":16,"tag":42,"props":514,"children":515},{"style":225},[516],{"type":22,"value":228},{"type":16,"tag":42,"props":518,"children":519},{"style":187},[520],{"type":22,"value":233},{"type":16,"tag":42,"props":522,"children":523},{"style":95},[524],{"type":22,"value":238},{"type":16,"tag":42,"props":526,"children":527},{"style":59},[528],{"type":22,"value":243},{"type":16,"tag":42,"props":530,"children":531},{"style":106},[532],{"type":22,"value":248},{"type":16,"tag":42,"props":534,"children":535},{"style":59},[536],{"type":22,"value":253},{"type":16,"tag":42,"props":538,"children":539},{"class":44,"line":264},[540],{"type":16,"tag":42,"props":541,"children":542},{"emptyLinePlaceholder":155},[543],{"type":22,"value":158},{"type":16,"tag":42,"props":545,"children":546},{"class":44,"line":283},[547,551,556,560,566],{"type":16,"tag":42,"props":548,"children":549},{"style":187},[550],{"type":22,"value":270},{"type":16,"tag":42,"props":552,"children":553},{"style":95},[554],{"type":22,"value":555}," handleClicked",{"type":16,"tag":42,"props":557,"children":558},{"style":59},[559],{"type":22,"value":294},{"type":16,"tag":42,"props":561,"children":563},{"style":562},"--shiki-default:#E36209;--shiki-dark:#FFAB70",[564],{"type":22,"value":565},"data",{"type":16,"tag":42,"props":567,"children":568},{"style":59},[569],{"type":22,"value":570},") {\n",{"type":16,"tag":42,"props":572,"children":573},{"class":44,"line":316},[574],{"type":16,"tag":42,"props":575,"children":576},{"style":49},[577],{"type":22,"value":578},"  \u002F\u002F Bubble up the event to the parent of the WrapperComponent\n",{"type":16,"tag":42,"props":580,"children":581},{"class":44,"line":325},[582,586,590,594],{"type":16,"tag":42,"props":583,"children":584},{"style":95},[585],{"type":22,"value":289},{"type":16,"tag":42,"props":587,"children":588},{"style":59},[589],{"type":22,"value":294},{"type":16,"tag":42,"props":591,"children":592},{"style":106},[593],{"type":22,"value":248},{"type":16,"tag":42,"props":595,"children":596},{"style":59},[597],{"type":22,"value":598},", data)\n",{"type":16,"tag":42,"props":600,"children":602},{"class":44,"line":601},15,[603],{"type":16,"tag":42,"props":604,"children":605},{"style":59},[606],{"type":22,"value":322},{"type":16,"tag":42,"props":608,"children":610},{"class":44,"line":609},16,[611,615,619],{"type":16,"tag":42,"props":612,"children":613},{"style":59},[614],{"type":22,"value":140},{"type":16,"tag":42,"props":616,"children":617},{"style":65},[618],{"type":22,"value":171},{"type":16,"tag":42,"props":620,"children":621},{"style":59},[622],{"type":22,"value":73},{"type":16,"tag":25,"props":624,"children":626},{"id":625},"parent-component",[627],{"type":22,"value":628},"Parent component",{"type":16,"tag":32,"props":630,"children":632},{"className":34,"code":631,"language":8,"meta":10,"style":10},"\u003C!-- ParentComponent.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CIntermediateComponent @clicked=\"onChildClicked\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nfunction onChildClicked(data) {\n  console.log('Event data from child:', data)\n}\n\u003C\u002Fscript>\n",[633],{"type":16,"tag":38,"props":634,"children":635},{"__ignoreMap":10},[636,644,659,675,717,733,748,755,774,798,824,831],{"type":16,"tag":42,"props":637,"children":638},{"class":44,"line":45},[639],{"type":16,"tag":42,"props":640,"children":641},{"style":49},[642],{"type":22,"value":643},"\u003C!-- ParentComponent.vue -->\n",{"type":16,"tag":42,"props":645,"children":646},{"class":44,"line":55},[647,651,655],{"type":16,"tag":42,"props":648,"children":649},{"style":59},[650],{"type":22,"value":62},{"type":16,"tag":42,"props":652,"children":653},{"style":65},[654],{"type":22,"value":68},{"type":16,"tag":42,"props":656,"children":657},{"style":59},[658],{"type":22,"value":73},{"type":16,"tag":42,"props":660,"children":661},{"class":44,"line":76},[662,666,671],{"type":16,"tag":42,"props":663,"children":664},{"style":59},[665],{"type":22,"value":82},{"type":16,"tag":42,"props":667,"children":668},{"style":65},[669],{"type":22,"value":670},"div",{"type":16,"tag":42,"props":672,"children":673},{"style":59},[674],{"type":22,"value":73},{"type":16,"tag":42,"props":676,"children":677},{"class":44,"line":134},[678,683,688,692,696,700,704,709,713],{"type":16,"tag":42,"props":679,"children":680},{"style":59},[681],{"type":22,"value":682},"    \u003C",{"type":16,"tag":42,"props":684,"children":685},{"style":65},[686],{"type":22,"value":687},"IntermediateComponent",{"type":16,"tag":42,"props":689,"children":690},{"style":59},[691],{"type":22,"value":92},{"type":16,"tag":42,"props":693,"children":694},{"style":95},[695],{"type":22,"value":395},{"type":16,"tag":42,"props":697,"children":698},{"style":59},[699],{"type":22,"value":103},{"type":16,"tag":42,"props":701,"children":702},{"style":106},[703],{"type":22,"value":109},{"type":16,"tag":42,"props":705,"children":706},{"style":59},[707],{"type":22,"value":708},"onChildClicked",{"type":16,"tag":42,"props":710,"children":711},{"style":106},[712],{"type":22,"value":109},{"type":16,"tag":42,"props":714,"children":715},{"style":59},[716],{"type":22,"value":417},{"type":16,"tag":42,"props":718,"children":719},{"class":44,"line":151},[720,725,729],{"type":16,"tag":42,"props":721,"children":722},{"style":59},[723],{"type":22,"value":724},"  \u003C\u002F",{"type":16,"tag":42,"props":726,"children":727},{"style":65},[728],{"type":22,"value":670},{"type":16,"tag":42,"props":730,"children":731},{"style":59},[732],{"type":22,"value":73},{"type":16,"tag":42,"props":734,"children":735},{"class":44,"line":161},[736,740,744],{"type":16,"tag":42,"props":737,"children":738},{"style":59},[739],{"type":22,"value":140},{"type":16,"tag":42,"props":741,"children":742},{"style":65},[743],{"type":22,"value":68},{"type":16,"tag":42,"props":745,"children":746},{"style":59},[747],{"type":22,"value":73},{"type":16,"tag":42,"props":749,"children":750},{"class":44,"line":183},[751],{"type":16,"tag":42,"props":752,"children":753},{"emptyLinePlaceholder":155},[754],{"type":22,"value":158},{"type":16,"tag":42,"props":756,"children":757},{"class":44,"line":208},[758,762,766,770],{"type":16,"tag":42,"props":759,"children":760},{"style":59},[761],{"type":22,"value":62},{"type":16,"tag":42,"props":763,"children":764},{"style":65},[765],{"type":22,"value":171},{"type":16,"tag":42,"props":767,"children":768},{"style":95},[769],{"type":22,"value":176},{"type":16,"tag":42,"props":771,"children":772},{"style":59},[773],{"type":22,"value":73},{"type":16,"tag":42,"props":775,"children":776},{"class":44,"line":216},[777,781,786,790,794],{"type":16,"tag":42,"props":778,"children":779},{"style":187},[780],{"type":22,"value":270},{"type":16,"tag":42,"props":782,"children":783},{"style":95},[784],{"type":22,"value":785}," onChildClicked",{"type":16,"tag":42,"props":787,"children":788},{"style":59},[789],{"type":22,"value":294},{"type":16,"tag":42,"props":791,"children":792},{"style":562},[793],{"type":22,"value":565},{"type":16,"tag":42,"props":795,"children":796},{"style":59},[797],{"type":22,"value":570},{"type":16,"tag":42,"props":799,"children":800},{"class":44,"line":256},[801,806,811,815,820],{"type":16,"tag":42,"props":802,"children":803},{"style":59},[804],{"type":22,"value":805},"  console.",{"type":16,"tag":42,"props":807,"children":808},{"style":95},[809],{"type":22,"value":810},"log",{"type":16,"tag":42,"props":812,"children":813},{"style":59},[814],{"type":22,"value":294},{"type":16,"tag":42,"props":816,"children":817},{"style":106},[818],{"type":22,"value":819},"'Event data from child:'",{"type":16,"tag":42,"props":821,"children":822},{"style":59},[823],{"type":22,"value":598},{"type":16,"tag":42,"props":825,"children":826},{"class":44,"line":264},[827],{"type":16,"tag":42,"props":828,"children":829},{"style":59},[830],{"type":22,"value":322},{"type":16,"tag":42,"props":832,"children":833},{"class":44,"line":283},[834,838,842],{"type":16,"tag":42,"props":835,"children":836},{"style":59},[837],{"type":22,"value":140},{"type":16,"tag":42,"props":839,"children":840},{"style":65},[841],{"type":22,"value":171},{"type":16,"tag":42,"props":843,"children":844},{"style":59},[845],{"type":22,"value":73},{"type":16,"tag":17,"props":847,"children":849},{"id":848},"the-more-straightforward-way-to-do-it",[850],{"type":22,"value":851},"The more straightforward way to do it",{"type":16,"tag":32,"props":853,"children":855},{"className":34,"code":854,"language":8,"meta":10,"style":10},"\u003C!-- IntermediateComponent.vue -->\n\u003Ctemplate>\n  \u003CChildComponent v-bind=\"$attrs\" @update:modelValue=\"handleModelUpdate\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport ChildComponent from '.\u002FChildComponent.vue'\nimport { defineEmits } from 'vue'\n\n\u002F\u002F Emit function that captures all event names\nconst emits = defineEmits()\n\nfunction handleModelUpdate(value) {\n  emits('update:modelValue', value)\n}\n\u003C\u002Fscript>\n",[856],{"type":16,"tag":38,"props":857,"children":858},{"__ignoreMap":10},[859,866,881,954,969,976,995,1014,1033,1040,1048,1072,1079,1104,1125,1132],{"type":16,"tag":42,"props":860,"children":861},{"class":44,"line":45},[862],{"type":16,"tag":42,"props":863,"children":864},{"style":49},[865],{"type":22,"value":359},{"type":16,"tag":42,"props":867,"children":868},{"class":44,"line":55},[869,873,877],{"type":16,"tag":42,"props":870,"children":871},{"style":59},[872],{"type":22,"value":62},{"type":16,"tag":42,"props":874,"children":875},{"style":65},[876],{"type":22,"value":68},{"type":16,"tag":42,"props":878,"children":879},{"style":59},[880],{"type":22,"value":73},{"type":16,"tag":42,"props":882,"children":883},{"class":44,"line":76},[884,888,892,897,901,905,910,914,918,923,928,933,937,941,946,950],{"type":16,"tag":42,"props":885,"children":886},{"style":59},[887],{"type":22,"value":82},{"type":16,"tag":42,"props":889,"children":890},{"style":65},[891],{"type":22,"value":386},{"type":16,"tag":42,"props":893,"children":894},{"style":95},[895],{"type":22,"value":896}," v-bind",{"type":16,"tag":42,"props":898,"children":899},{"style":59},[900],{"type":22,"value":103},{"type":16,"tag":42,"props":902,"children":903},{"style":106},[904],{"type":22,"value":109},{"type":16,"tag":42,"props":906,"children":907},{"style":59},[908],{"type":22,"value":909},"$attrs",{"type":16,"tag":42,"props":911,"children":912},{"style":106},[913],{"type":22,"value":109},{"type":16,"tag":42,"props":915,"children":916},{"style":59},[917],{"type":22,"value":92},{"type":16,"tag":42,"props":919,"children":920},{"style":95},[921],{"type":22,"value":922},"update",{"type":16,"tag":42,"props":924,"children":925},{"style":59},[926],{"type":22,"value":927},":",{"type":16,"tag":42,"props":929,"children":930},{"style":95},[931],{"type":22,"value":932},"modelValue",{"type":16,"tag":42,"props":934,"children":935},{"style":59},[936],{"type":22,"value":103},{"type":16,"tag":42,"props":938,"children":939},{"style":106},[940],{"type":22,"value":109},{"type":16,"tag":42,"props":942,"children":943},{"style":59},[944],{"type":22,"value":945},"handleModelUpdate",{"type":16,"tag":42,"props":947,"children":948},{"style":106},[949],{"type":22,"value":109},{"type":16,"tag":42,"props":951,"children":952},{"style":59},[953],{"type":22,"value":417},{"type":16,"tag":42,"props":955,"children":956},{"class":44,"line":134},[957,961,965],{"type":16,"tag":42,"props":958,"children":959},{"style":59},[960],{"type":22,"value":140},{"type":16,"tag":42,"props":962,"children":963},{"style":65},[964],{"type":22,"value":68},{"type":16,"tag":42,"props":966,"children":967},{"style":59},[968],{"type":22,"value":73},{"type":16,"tag":42,"props":970,"children":971},{"class":44,"line":151},[972],{"type":16,"tag":42,"props":973,"children":974},{"emptyLinePlaceholder":155},[975],{"type":22,"value":158},{"type":16,"tag":42,"props":977,"children":978},{"class":44,"line":161},[979,983,987,991],{"type":16,"tag":42,"props":980,"children":981},{"style":59},[982],{"type":22,"value":62},{"type":16,"tag":42,"props":984,"children":985},{"style":65},[986],{"type":22,"value":171},{"type":16,"tag":42,"props":988,"children":989},{"style":95},[990],{"type":22,"value":176},{"type":16,"tag":42,"props":992,"children":993},{"style":59},[994],{"type":22,"value":73},{"type":16,"tag":42,"props":996,"children":997},{"class":44,"line":183},[998,1002,1006,1010],{"type":16,"tag":42,"props":999,"children":1000},{"style":187},[1001],{"type":22,"value":190},{"type":16,"tag":42,"props":1003,"children":1004},{"style":59},[1005],{"type":22,"value":470},{"type":16,"tag":42,"props":1007,"children":1008},{"style":187},[1009],{"type":22,"value":200},{"type":16,"tag":42,"props":1011,"children":1012},{"style":106},[1013],{"type":22,"value":479},{"type":16,"tag":42,"props":1015,"children":1016},{"class":44,"line":208},[1017,1021,1025,1029],{"type":16,"tag":42,"props":1018,"children":1019},{"style":187},[1020],{"type":22,"value":190},{"type":16,"tag":42,"props":1022,"children":1023},{"style":59},[1024],{"type":22,"value":195},{"type":16,"tag":42,"props":1026,"children":1027},{"style":187},[1028],{"type":22,"value":200},{"type":16,"tag":42,"props":1030,"children":1031},{"style":106},[1032],{"type":22,"value":205},{"type":16,"tag":42,"props":1034,"children":1035},{"class":44,"line":216},[1036],{"type":16,"tag":42,"props":1037,"children":1038},{"emptyLinePlaceholder":155},[1039],{"type":22,"value":158},{"type":16,"tag":42,"props":1041,"children":1042},{"class":44,"line":256},[1043],{"type":16,"tag":42,"props":1044,"children":1045},{"style":49},[1046],{"type":22,"value":1047},"\u002F\u002F Emit function that captures all event names\n",{"type":16,"tag":42,"props":1049,"children":1050},{"class":44,"line":264},[1051,1055,1059,1063,1067],{"type":16,"tag":42,"props":1052,"children":1053},{"style":187},[1054],{"type":22,"value":222},{"type":16,"tag":42,"props":1056,"children":1057},{"style":225},[1058],{"type":22,"value":228},{"type":16,"tag":42,"props":1060,"children":1061},{"style":187},[1062],{"type":22,"value":233},{"type":16,"tag":42,"props":1064,"children":1065},{"style":95},[1066],{"type":22,"value":238},{"type":16,"tag":42,"props":1068,"children":1069},{"style":59},[1070],{"type":22,"value":1071},"()\n",{"type":16,"tag":42,"props":1073,"children":1074},{"class":44,"line":283},[1075],{"type":16,"tag":42,"props":1076,"children":1077},{"emptyLinePlaceholder":155},[1078],{"type":22,"value":158},{"type":16,"tag":42,"props":1080,"children":1081},{"class":44,"line":316},[1082,1086,1091,1095,1100],{"type":16,"tag":42,"props":1083,"children":1084},{"style":187},[1085],{"type":22,"value":270},{"type":16,"tag":42,"props":1087,"children":1088},{"style":95},[1089],{"type":22,"value":1090}," handleModelUpdate",{"type":16,"tag":42,"props":1092,"children":1093},{"style":59},[1094],{"type":22,"value":294},{"type":16,"tag":42,"props":1096,"children":1097},{"style":562},[1098],{"type":22,"value":1099},"value",{"type":16,"tag":42,"props":1101,"children":1102},{"style":59},[1103],{"type":22,"value":570},{"type":16,"tag":42,"props":1105,"children":1106},{"class":44,"line":325},[1107,1111,1115,1120],{"type":16,"tag":42,"props":1108,"children":1109},{"style":95},[1110],{"type":22,"value":289},{"type":16,"tag":42,"props":1112,"children":1113},{"style":59},[1114],{"type":22,"value":294},{"type":16,"tag":42,"props":1116,"children":1117},{"style":106},[1118],{"type":22,"value":1119},"'update:modelValue'",{"type":16,"tag":42,"props":1121,"children":1122},{"style":59},[1123],{"type":22,"value":1124},", value)\n",{"type":16,"tag":42,"props":1126,"children":1127},{"class":44,"line":601},[1128],{"type":16,"tag":42,"props":1129,"children":1130},{"style":59},[1131],{"type":22,"value":322},{"type":16,"tag":42,"props":1133,"children":1134},{"class":44,"line":609},[1135,1139,1143],{"type":16,"tag":42,"props":1136,"children":1137},{"style":59},[1138],{"type":22,"value":140},{"type":16,"tag":42,"props":1140,"children":1141},{"style":65},[1142],{"type":22,"value":171},{"type":16,"tag":42,"props":1144,"children":1145},{"style":59},[1146],{"type":22,"value":73},{"type":16,"tag":1148,"props":1149,"children":1150},"style",{},[1151],{"type":22,"value":1152},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":10,"searchDepth":55,"depth":55,"links":1154},[1155,1160],{"id":19,"depth":55,"text":23,"children":1156},[1157,1158,1159],{"id":27,"depth":76,"text":30},{"id":341,"depth":76,"text":344},{"id":625,"depth":76,"text":628},{"id":848,"depth":55,"text":851},"markdown","content:codesnippets:vue:bubble-up-event-composition-api.md","content","codesnippets\u002Fvue\u002Fbubble-up-event-composition-api.md","codesnippets\u002Fvue\u002Fbubble-up-event-composition-api","md",1779013873263]