[{"data":1,"prerenderedAt":1158},["ShallowReactive",2],{"page-\u002Fvue\u002Fprops-et-evenements":3,"pieces-vue":1115,"autour-\u002Fvue\u002Fprops-et-evenements":1140,"prerequis-\u002Fvue\u002Fprops-et-evenements":1145,"plan-vue":1147},{"id":4,"title":5,"body":6,"description":1080,"extension":1081,"ligne":58,"meta":1082,"motsCles":1083,"navigation":149,"niveau":1090,"path":1091,"prerequis":1092,"ressources":1094,"seo":1105,"sources":1106,"stem":1113,"__hash__":1114},"docs\u002Fvue\u002F04.props-et-evenements.md","Props, événements et v-model sur un composant",{"type":7,"value":8,"toc":1069},"minimark",[9,14,36,40,52,229,232,288,307,316,320,323,382,385,389,396,402,406,416,537,543,657,664,668,678,753,762,885,889,899,954,965,969,1014,1020,1024,1065],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Passer des données d'un parent à son enfant avec les props.",[18,22,23],{},"Remonter une information de l'enfant vers le parent avec un événement.",[18,25,26,27,31,32,35],{},"Utiliser ",[28,29,30],"code",{},"v-model"," sur ton propre composant avec ",[28,33,34],{},"defineModel()",".",[10,37,39],{"id":38},"les-props-du-parent-vers-lenfant","Les props : du parent vers l'enfant",[41,42,43,44,48,49,35],"p",{},"Une ",[45,46,47],"strong",{},"prop"," est une donnée qu'un composant reçoit de son parent. L'enfant la déclare avec ",[28,50,51],{},"defineProps()",[53,54,60],"pre",{"className":55,"code":56,"filename":57,"language":58,"meta":59,"style":59},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  titre: string\n  minutes?: number\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch3>{{ titre }}\u003C\u002Fh3>\n    \u003Cp v-if=\"minutes\">{{ minutes }} min\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCarteRecette.vue","vue","",[28,61,62,92,102,116,128,134,144,151,161,172,188,210,220],{"__ignoreMap":59},[63,64,67,71,75,79,82,85,89],"span",{"class":65,"line":66},"line",1,[63,68,70],{"class":69},"scfrF","\u003C",[63,72,74],{"class":73},"s5JFL","script",[63,76,78],{"class":77},"s5iOY"," setup",[63,80,81],{"class":77}," lang",[63,83,84],{"class":69},"=",[63,86,88],{"class":87},"shWOn","\"ts\"",[63,90,91],{"class":69},">\n",[63,93,95,99],{"class":65,"line":94},2,[63,96,98],{"class":97},"syCW7","defineProps",[63,100,101],{"class":69},"\u003C{\n",[63,103,105,109,113],{"class":65,"line":104},3,[63,106,108],{"class":107},"sIXEE","  titre",[63,110,112],{"class":111},"sOnC1",":",[63,114,115],{"class":77}," string\n",[63,117,119,122,125],{"class":65,"line":118},4,[63,120,121],{"class":107},"  minutes",[63,123,124],{"class":111},"?:",[63,126,127],{"class":77}," number\n",[63,129,131],{"class":65,"line":130},5,[63,132,133],{"class":69},"}>()\n",[63,135,137,140,142],{"class":65,"line":136},6,[63,138,139],{"class":69},"\u003C\u002F",[63,141,74],{"class":73},[63,143,91],{"class":69},[63,145,147],{"class":65,"line":146},7,[63,148,150],{"emptyLinePlaceholder":149},true,"\n",[63,152,154,156,159],{"class":65,"line":153},8,[63,155,70],{"class":69},[63,157,158],{"class":73},"template",[63,160,91],{"class":69},[63,162,164,167,170],{"class":65,"line":163},9,[63,165,166],{"class":69},"  \u003C",[63,168,169],{"class":73},"article",[63,171,91],{"class":69},[63,173,175,178,181,184,186],{"class":65,"line":174},10,[63,176,177],{"class":69},"    \u003C",[63,179,180],{"class":73},"h3",[63,182,183],{"class":69},">{{ titre }}\u003C\u002F",[63,185,180],{"class":73},[63,187,91],{"class":69},[63,189,191,193,195,198,200,203,206,208],{"class":65,"line":190},11,[63,192,177],{"class":69},[63,194,41],{"class":73},[63,196,197],{"class":77}," v-if",[63,199,84],{"class":69},[63,201,202],{"class":87},"\"minutes\"",[63,204,205],{"class":69},">{{ minutes }} min\u003C\u002F",[63,207,41],{"class":73},[63,209,91],{"class":69},[63,211,213,216,218],{"class":65,"line":212},12,[63,214,215],{"class":69},"  \u003C\u002F",[63,217,169],{"class":73},[63,219,91],{"class":69},[63,221,223,225,227],{"class":65,"line":222},13,[63,224,139],{"class":69},[63,226,158],{"class":73},[63,228,91],{"class":69},[41,230,231],{},"Le parent les passe comme des attributs :",[53,233,236],{"className":55,"code":234,"filename":235,"language":58,"meta":59,"style":59},"\u003Ctemplate>\n  \u003CCarteRecette titre=\"Crêpes\" :minutes=\"20\" \u002F>\n\u003C\u002Ftemplate>\n","src\u002FApp.vue",[28,237,238,246,280],{"__ignoreMap":59},[63,239,240,242,244],{"class":65,"line":66},[63,241,70],{"class":69},[63,243,158],{"class":73},[63,245,91],{"class":69},[63,247,248,250,253,256,258,261,264,267,269,272,275,277],{"class":65,"line":94},[63,249,166],{"class":69},[63,251,252],{"class":73},"CarteRecette",[63,254,255],{"class":77}," titre",[63,257,84],{"class":69},[63,259,260],{"class":87},"\"Crêpes\"",[63,262,263],{"class":69}," :",[63,265,266],{"class":77},"minutes",[63,268,84],{"class":69},[63,270,271],{"class":69},"\"",[63,273,274],{"class":77},"20",[63,276,271],{"class":69},[63,278,279],{"class":69}," \u002F>\n",[63,281,282,284,286],{"class":65,"line":104},[63,283,139],{"class":69},[63,285,158],{"class":73},[63,287,91],{"class":69},[41,289,290,291,294,295,298,299,302,303,306],{},"Un texte fixe s'écrit tel quel (",[28,292,293],{},"titre=\"Crêpes\"","). Pour une valeur JavaScript, on utilise ",[28,296,297],{},"v-bind"," : ",[28,300,301],{},":minutes=\"20\"",". Le ",[28,304,305],{},"?"," dans le type signifie que la prop est facultative.",[41,308,309,310,312,313,35],{},"Dans le template, les props s'utilisent directement. Dans le script, ",[28,311,51],{}," renvoie un objet si tu le stockes : ",[28,314,315],{},"const props = defineProps\u003C...>()",[10,317,319],{"id":318},"une-valeur-par-défaut","Une valeur par défaut",[41,321,322],{},"Avec la déstructuration, une prop facultative reçoit sa valeur par défaut comme n'importe quelle variable :",[53,324,328],{"className":325,"code":326,"language":327,"meta":59,"style":59},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","const { titre, minutes = 30 } = defineProps\u003C{\n  titre: string\n  minutes?: number\n}>()\n","ts",[28,329,330,362,370,378],{"__ignoreMap":59},[63,331,332,335,338,341,344,346,349,352,355,357,360],{"class":65,"line":66},[63,333,334],{"class":111},"const",[63,336,337],{"class":69}," { ",[63,339,340],{"class":77},"titre",[63,342,343],{"class":69},", ",[63,345,266],{"class":77},[63,347,348],{"class":111}," =",[63,350,351],{"class":77}," 30",[63,353,354],{"class":69}," } ",[63,356,84],{"class":111},[63,358,359],{"class":97}," defineProps",[63,361,101],{"class":69},[63,363,364,366,368],{"class":65,"line":94},[63,365,108],{"class":107},[63,367,112],{"class":111},[63,369,115],{"class":77},[63,371,372,374,376],{"class":65,"line":104},[63,373,121],{"class":107},[63,375,124],{"class":111},[63,377,127],{"class":77},[63,379,380],{"class":65,"line":118},[63,381,133],{"class":69},[41,383,384],{},"À partir de Vue 3.5, ces variables restent réactives. Avant la 3.5, elles étaient de simples constantes qui ne se mettaient jamais à jour.",[10,386,388],{"id":387},"le-flux-est-à-sens-unique","Le flux est à sens unique",[41,390,391,392,395],{},"Les données descendent du parent vers l'enfant, jamais l'inverse. Une prop est en lecture seule : ",[28,393,394],{},"props.titre = 'autre'"," provoque un avertissement.",[397,398,399],"warning",{},[41,400,401],{},"Ne modifie jamais une prop dans l'enfant. Si l'enfant a besoin de changer la valeur, il prévient le parent avec un événement, et c'est le parent qui la modifie.",[10,403,405],{"id":404},"les-événements-de-lenfant-vers-le-parent","Les événements : de l'enfant vers le parent",[41,407,408,409,412,413,35],{},"Un composant déclare ses événements avec ",[28,410,411],{},"defineEmits()"," et les déclenche avec ",[28,414,415],{},"emit()",[53,417,420],{"className":55,"code":418,"filename":419,"language":58,"meta":59,"style":59},"\u003Cscript setup lang=\"ts\">\nconst emit = defineEmits\u003C{\n  (e: 'choisir', id: number): void\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"emit('choisir', 42)\">Ajouter aux favoris\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FBoutonFavori.vue",[28,421,422,438,452,483,487,495,499,507,529],{"__ignoreMap":59},[63,423,424,426,428,430,432,434,436],{"class":65,"line":66},[63,425,70],{"class":69},[63,427,74],{"class":73},[63,429,78],{"class":77},[63,431,81],{"class":77},[63,433,84],{"class":69},[63,435,88],{"class":87},[63,437,91],{"class":69},[63,439,440,442,445,447,450],{"class":65,"line":94},[63,441,334],{"class":111},[63,443,444],{"class":77}," emit",[63,446,348],{"class":111},[63,448,449],{"class":97}," defineEmits",[63,451,101],{"class":69},[63,453,454,457,460,462,465,467,470,472,475,478,480],{"class":65,"line":104},[63,455,456],{"class":69},"  (",[63,458,459],{"class":107},"e",[63,461,112],{"class":111},[63,463,464],{"class":87}," 'choisir'",[63,466,343],{"class":69},[63,468,469],{"class":107},"id",[63,471,112],{"class":111},[63,473,474],{"class":77}," number",[63,476,477],{"class":69},")",[63,479,112],{"class":111},[63,481,482],{"class":77}," void\n",[63,484,485],{"class":65,"line":118},[63,486,133],{"class":69},[63,488,489,491,493],{"class":65,"line":130},[63,490,139],{"class":69},[63,492,74],{"class":73},[63,494,91],{"class":69},[63,496,497],{"class":65,"line":136},[63,498,150],{"emptyLinePlaceholder":149},[63,500,501,503,505],{"class":65,"line":146},[63,502,70],{"class":69},[63,504,158],{"class":73},[63,506,91],{"class":69},[63,508,509,511,514,517,519,522,525,527],{"class":65,"line":153},[63,510,166],{"class":69},[63,512,513],{"class":73},"button",[63,515,516],{"class":77}," @click",[63,518,84],{"class":69},[63,520,521],{"class":87},"\"emit('choisir', 42)\"",[63,523,524],{"class":69},">Ajouter aux favoris\u003C\u002F",[63,526,513],{"class":73},[63,528,91],{"class":69},[63,530,531,533,535],{"class":65,"line":163},[63,532,139],{"class":69},[63,534,158],{"class":73},[63,536,91],{"class":69},[41,538,539,540,263],{},"Le parent écoute avec ",[28,541,542],{},"@",[53,544,546],{"className":55,"code":545,"language":58,"meta":59,"style":59},"\u003Cscript setup lang=\"ts\">\nfunction noter(id: number) {\n  console.log('Favori :', id)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBoutonFavori @choisir=\"noter\" \u002F>\n\u003C\u002Ftemplate>\n",[28,547,548,564,584,600,605,613,617,625,649],{"__ignoreMap":59},[63,549,550,552,554,556,558,560,562],{"class":65,"line":66},[63,551,70],{"class":69},[63,553,74],{"class":73},[63,555,78],{"class":77},[63,557,81],{"class":77},[63,559,84],{"class":69},[63,561,88],{"class":87},[63,563,91],{"class":69},[63,565,566,569,572,575,577,579,581],{"class":65,"line":94},[63,567,568],{"class":111},"function",[63,570,571],{"class":97}," noter",[63,573,574],{"class":69},"(",[63,576,469],{"class":107},[63,578,112],{"class":111},[63,580,474],{"class":77},[63,582,583],{"class":69},") {\n",[63,585,586,589,592,594,597],{"class":65,"line":104},[63,587,588],{"class":69},"  console.",[63,590,591],{"class":97},"log",[63,593,574],{"class":69},[63,595,596],{"class":87},"'Favori :'",[63,598,599],{"class":69},", id)\n",[63,601,602],{"class":65,"line":118},[63,603,604],{"class":69},"}\n",[63,606,607,609,611],{"class":65,"line":130},[63,608,139],{"class":69},[63,610,74],{"class":73},[63,612,91],{"class":69},[63,614,615],{"class":65,"line":136},[63,616,150],{"emptyLinePlaceholder":149},[63,618,619,621,623],{"class":65,"line":146},[63,620,70],{"class":69},[63,622,158],{"class":73},[63,624,91],{"class":69},[63,626,627,629,632,635,638,640,642,645,647],{"class":65,"line":153},[63,628,166],{"class":69},[63,630,631],{"class":73},"BoutonFavori",[63,633,634],{"class":69}," @",[63,636,637],{"class":77},"choisir",[63,639,84],{"class":69},[63,641,271],{"class":69},[63,643,644],{"class":69},"noter",[63,646,271],{"class":69},[63,648,279],{"class":69},[63,650,651,653,655],{"class":65,"line":163},[63,652,139],{"class":69},[63,654,158],{"class":73},[63,656,91],{"class":69},[41,658,659,660,663],{},"Les arguments de ",[28,661,662],{},"emit"," après le nom arrivent dans le même ordre dans la fonction du parent.",[10,665,667],{"id":666},"le-v-model-sur-un-composant","Le v-model sur un composant",[41,669,670,671,674,675,677],{},"Que se passe-t-il si tu écris ",[28,672,673],{},"\u003CChampTitre v-model=\"titre\" \u002F>"," ? Il faut une prop pour recevoir la valeur et un événement pour la renvoyer. Depuis Vue 3.4, la macro ",[28,676,34],{}," fait les deux d'un coup.",[53,679,682],{"className":55,"code":680,"filename":681,"language":58,"meta":59,"style":59},"\u003Cscript setup>\nconst titre = defineModel()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"titre\" \u002F>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FChampTitre.vue",[28,683,684,694,708,716,720,728,745],{"__ignoreMap":59},[63,685,686,688,690,692],{"class":65,"line":66},[63,687,70],{"class":69},[63,689,74],{"class":73},[63,691,78],{"class":77},[63,693,91],{"class":69},[63,695,696,698,700,702,705],{"class":65,"line":94},[63,697,334],{"class":111},[63,699,255],{"class":77},[63,701,348],{"class":111},[63,703,704],{"class":97}," defineModel",[63,706,707],{"class":69},"()\n",[63,709,710,712,714],{"class":65,"line":104},[63,711,139],{"class":69},[63,713,74],{"class":73},[63,715,91],{"class":69},[63,717,718],{"class":65,"line":118},[63,719,150],{"emptyLinePlaceholder":149},[63,721,722,724,726],{"class":65,"line":130},[63,723,70],{"class":69},[63,725,158],{"class":73},[63,727,91],{"class":69},[63,729,730,732,735,738,740,743],{"class":65,"line":136},[63,731,166],{"class":69},[63,733,734],{"class":73},"input",[63,736,737],{"class":77}," v-model",[63,739,84],{"class":69},[63,741,742],{"class":87},"\"titre\"",[63,744,279],{"class":69},[63,746,747,749,751],{"class":65,"line":146},[63,748,139],{"class":69},[63,750,158],{"class":73},[63,752,91],{"class":69},[41,754,755,757,758,761],{},[28,756,340],{}," se comporte comme un ",[28,759,760],{},"ref",". Quand l'enfant le modifie, le parent est prévenu et sa propre variable change.",[53,763,765],{"className":55,"code":764,"filename":235,"language":58,"meta":59,"style":59},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport ChampTitre from '.\u002Fcomponents\u002FChampTitre.vue'\n\nconst titre = ref('Tarte aux pommes')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChampTitre v-model=\"titre\" \u002F>\n  \u003Cp>{{ titre }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[28,766,767,777,791,803,807,826,834,838,846,865,877],{"__ignoreMap":59},[63,768,769,771,773,775],{"class":65,"line":66},[63,770,70],{"class":69},[63,772,74],{"class":73},[63,774,78],{"class":77},[63,776,91],{"class":69},[63,778,779,782,785,788],{"class":65,"line":94},[63,780,781],{"class":111},"import",[63,783,784],{"class":69}," { ref } ",[63,786,787],{"class":111},"from",[63,789,790],{"class":87}," 'vue'\n",[63,792,793,795,798,800],{"class":65,"line":104},[63,794,781],{"class":111},[63,796,797],{"class":69}," ChampTitre ",[63,799,787],{"class":111},[63,801,802],{"class":87}," '.\u002Fcomponents\u002FChampTitre.vue'\n",[63,804,805],{"class":65,"line":118},[63,806,150],{"emptyLinePlaceholder":149},[63,808,809,811,813,815,818,820,823],{"class":65,"line":130},[63,810,334],{"class":111},[63,812,255],{"class":77},[63,814,348],{"class":111},[63,816,817],{"class":97}," ref",[63,819,574],{"class":69},[63,821,822],{"class":87},"'Tarte aux pommes'",[63,824,825],{"class":69},")\n",[63,827,828,830,832],{"class":65,"line":136},[63,829,139],{"class":69},[63,831,74],{"class":73},[63,833,91],{"class":69},[63,835,836],{"class":65,"line":146},[63,837,150],{"emptyLinePlaceholder":149},[63,839,840,842,844],{"class":65,"line":153},[63,841,70],{"class":69},[63,843,158],{"class":73},[63,845,91],{"class":69},[63,847,848,850,853,855,857,859,861,863],{"class":65,"line":163},[63,849,166],{"class":69},[63,851,852],{"class":73},"ChampTitre",[63,854,737],{"class":77},[63,856,84],{"class":69},[63,858,271],{"class":69},[63,860,340],{"class":69},[63,862,271],{"class":69},[63,864,279],{"class":69},[63,866,867,869,871,873,875],{"class":65,"line":174},[63,868,166],{"class":69},[63,870,41],{"class":73},[63,872,183],{"class":69},[63,874,41],{"class":73},[63,876,91],{"class":69},[63,878,879,881,883],{"class":65,"line":190},[63,880,139],{"class":69},[63,882,158],{"class":73},[63,884,91],{"class":69},[10,886,888],{"id":887},"plusieurs-modèles-et-options","Plusieurs modèles et options",[41,890,891,892,895,896,263],{},"Tu peux donner un nom au modèle, et ajouter des options comme ",[28,893,894],{},"required"," ou ",[28,897,898],{},"default",[53,900,904],{"className":901,"code":902,"language":903,"meta":59,"style":59},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","const titre = defineModel('titre', { required: true })\nconst note = defineModel('note', { default: 0 })\n","js",[28,905,906,930],{"__ignoreMap":59},[63,907,908,910,912,914,916,918,921,924,927],{"class":65,"line":66},[63,909,334],{"class":111},[63,911,255],{"class":77},[63,913,348],{"class":111},[63,915,704],{"class":97},[63,917,574],{"class":69},[63,919,920],{"class":87},"'titre'",[63,922,923],{"class":69},", { required: ",[63,925,926],{"class":77},"true",[63,928,929],{"class":69}," })\n",[63,931,932,934,937,939,941,943,946,949,952],{"class":65,"line":94},[63,933,334],{"class":111},[63,935,936],{"class":77}," note",[63,938,348],{"class":111},[63,940,704],{"class":97},[63,942,574],{"class":69},[63,944,945],{"class":87},"'note'",[63,947,948],{"class":69},", { default: ",[63,950,951],{"class":77},"0",[63,953,929],{"class":69},[41,955,956,957,960,961,964],{},"Le parent écrit alors ",[28,958,959],{},"v-model:titre=\"...\""," et ",[28,962,963],{},"v-model:note=\"...\"",". Un composant peut ainsi exposer plusieurs valeurs liées.",[10,966,968],{"id":967},"quel-outil-choisir","Quel outil choisir ?",[970,971,972,985],"table",{},[973,974,975],"thead",{},[976,977,978,982],"tr",{},[979,980,981],"th",{},"Besoin",[979,983,984],{},"Outil",[986,987,988,997,1005],"tbody",{},[976,989,990,994],{},[991,992,993],"td",{},"Donner une donnée à l'enfant",[991,995,996],{},"Une prop",[976,998,999,1002],{},[991,1000,1001],{},"Prévenir le parent d'une action",[991,1003,1004],{},"Un événement",[976,1006,1007,1010],{},[991,1008,1009],{},"Un champ que l'enfant peut modifier",[991,1011,1012],{},[28,1013,34],{},[1015,1016,1017],"tip",{},[41,1018,1019],{},"Pose-toi la question : « qui possède cette donnée ? ». Le composant qui la possède la déclare, les autres la reçoivent ou demandent un changement.",[10,1021,1023],{"id":1022},"à-retenir","À retenir",[15,1025,1026,1031,1034,1047,1055],{},[18,1027,1028,1030],{},[28,1029,51],{}," déclare les données reçues du parent ; elles sont en lecture seule.",[18,1032,1033],{},"Les données descendent par les props, les informations remontent par les événements.",[18,1035,1036,1038,1039,1042,1043,1046],{},[28,1037,411],{}," déclare les événements, ",[28,1040,1041],{},"emit('nom', valeur)"," les déclenche, ",[28,1044,1045],{},"@nom"," les écoute.",[18,1048,1049,1051,1052,1054],{},[28,1050,34],{}," crée une prop et son événement pour utiliser ",[28,1053,30],{}," sur un composant.",[18,1056,1057,1058,1061,1062,35],{},"Avec ",[28,1059,1060],{},"defineModel('nom')",", le parent écrit ",[28,1063,1064],{},"v-model:nom",[1066,1067,1068],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":59,"searchDepth":94,"depth":104,"links":1070},[1071,1072,1073,1074,1075,1076,1077,1078,1079],{"id":12,"depth":94,"text":13},{"id":38,"depth":94,"text":39},{"id":318,"depth":94,"text":319},{"id":387,"depth":94,"text":388},{"id":404,"depth":94,"text":405},{"id":666,"depth":94,"text":667},{"id":887,"depth":94,"text":888},{"id":967,"depth":94,"text":968},{"id":1022,"depth":94,"text":1023},"Faire communiquer un composant parent et son enfant avec defineProps, defineEmits et defineModel.","md",{},[1084,98,1085,1086,1087,1088,30,1089],"props","defineEmits","defineModel","événement","flux de données","parent et enfant","intermediaire","\u002Fvue\u002Fprops-et-evenements",[1093],"\u002Fvue\u002Freactivite",[1095,1099,1102],{"nom":1096,"url":1097,"type":1098},"Vue.js, props (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fcomponents\u002Fprops.html","doc",{"nom":1100,"url":1101,"type":1098},"Vue.js, événements émis (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fcomponents\u002Fevents.html",{"nom":1103,"url":1104,"type":1098},"Vue.js, v-model sur un composant (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fcomponents\u002Fv-model.html",{"title":5,"description":1080},[1107,1109,1111],{"nom":1108,"url":1097},"Props (documentation officielle en français)",{"nom":1110,"url":1101},"Événements émis (documentation officielle en français)",{"nom":1112,"url":1104},"v-model sur un composant (documentation officielle en français)","vue\u002F04.props-et-evenements","UAh_ggvgPbJ3fswsIyPJ9hbon8PPA34HGbl1GxrtyhI",[1116,1120,1124,1127,1128,1132,1136],{"path":1117,"title":1118,"stem":1119},"\u002Fvue\u002Fpremier-composant","Ton premier composant Vue","vue\u002F01.premier-composant",{"path":1121,"title":1122,"stem":1123},"\u002Fvue\u002Ftemplate-et-directives","Le template et les directives","vue\u002F02.template-et-directives",{"path":1093,"title":1125,"stem":1126},"La réactivité","vue\u002F03.reactivite",{"path":1091,"title":5,"stem":1113},{"path":1129,"title":1130,"stem":1131},"\u002Fvue\u002Fslots-watch-et-cycle-de-vie","Slots, watch et cycle de vie","vue\u002F05.slots-watch-et-cycle-de-vie",{"path":1133,"title":1134,"stem":1135},"\u002Fvue\u002Fcomposables","Les composables","vue\u002F06.composables",{"path":1137,"title":1138,"stem":1139},"\u002Fvue","Vue","vue\u002Findex",[1141,1143],{"title":1125,"path":1093,"stem":1126,"description":1142,"children":-1},"Déclarer un état avec ref et reactive, calculer des valeurs dérivées avec computed et lier un champ de formulaire avec v-model.",{"title":1130,"path":1129,"stem":1131,"description":1144,"children":-1},"Laisser le parent fournir du contenu avec les slots, réagir aux changements avec watch et agir au bon moment avec onMounted.",[1146],{"path":1093,"title":1125,"ligne":58},[1148,1150,1151,1152,1153,1154,1156],{"path":1117,"title":1118,"niveau":1149,"stem":1119},"debutant",{"path":1121,"title":1122,"niveau":1149,"stem":1123},{"path":1093,"title":1125,"niveau":1149,"stem":1126},{"path":1091,"title":5,"niveau":1090,"stem":1113},{"path":1129,"title":1130,"niveau":1090,"stem":1131},{"path":1133,"title":1134,"niveau":1155,"stem":1135},"avance",{"path":1137,"title":1138,"niveau":1157,"stem":1139},"memo",1794583438606]