[{"data":1,"prerenderedAt":1083},["ShallowReactive",2],{"page-\u002Fvue\u002Fslots-watch-et-cycle-de-vie":3,"pieces-vue":1040,"autour-\u002Fvue\u002Fslots-watch-et-cycle-de-vie":1065,"prerequis-\u002Fvue\u002Fslots-watch-et-cycle-de-vie":1070,"plan-vue":1072},{"id":4,"title":5,"body":6,"description":1008,"extension":1009,"ligne":62,"meta":1010,"motsCles":1011,"navigation":402,"niveau":1015,"path":1016,"prerequis":1017,"ressources":1019,"seo":1030,"sources":1031,"stem":1038,"__hash__":1039},"docs\u002Fvue\u002F05.slots-watch-et-cycle-de-vie.md","Slots, watch et cycle de vie",{"type":7,"value":8,"toc":999},"minimark",[9,14,39,43,56,139,145,196,200,206,323,338,478,484,488,493,622,625,632,685,692,696,702,737,746,759,763,770,820,932,935,949,953,995],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,29],"ul",{},[18,19,20],"li",{},"Laisser le parent fournir du contenu à un composant avec les slots.",[18,22,23,24,28],{},"Exécuter du code quand une valeur change avec ",[25,26,27],"code",{},"watch()",".",[18,30,31,32,35,36,28],{},"Agir quand un composant apparaît ou disparaît avec ",[25,33,34],{},"onMounted()"," et ",[25,37,38],{},"onUnmounted()",[10,40,42],{"id":41},"le-slot-un-trou-à-remplir","Le slot : un trou à remplir",[44,45,46,47,51,52,55],"p",{},"Une prop transmet une donnée. Un ",[48,49,50],"strong",{},"slot"," transmet un morceau de template. Le composant enfant place un ",[25,53,54],{},"\u003Cslot>"," là où le contenu du parent doit apparaître.",[57,58,64],"pre",{"className":59,"code":60,"filename":61,"language":62,"meta":63,"style":63},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003Cdiv class=\"encadre\">\n    \u003Cslot>Aucun contenu\u003C\u002Fslot>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FEncadre.vue","vue","",[25,65,66,82,104,119,129],{"__ignoreMap":63},[67,68,71,75,79],"span",{"class":69,"line":70},"line",1,[67,72,74],{"class":73},"scfrF","\u003C",[67,76,78],{"class":77},"s5JFL","template",[67,80,81],{"class":73},">\n",[67,83,85,88,91,95,98,102],{"class":69,"line":84},2,[67,86,87],{"class":73},"  \u003C",[67,89,90],{"class":77},"div",[67,92,94],{"class":93},"s5iOY"," class",[67,96,97],{"class":73},"=",[67,99,101],{"class":100},"shWOn","\"encadre\"",[67,103,81],{"class":73},[67,105,107,110,112,115,117],{"class":69,"line":106},3,[67,108,109],{"class":73},"    \u003C",[67,111,50],{"class":77},[67,113,114],{"class":73},">Aucun contenu\u003C\u002F",[67,116,50],{"class":77},[67,118,81],{"class":73},[67,120,122,125,127],{"class":69,"line":121},4,[67,123,124],{"class":73},"  \u003C\u002F",[67,126,90],{"class":77},[67,128,81],{"class":73},[67,130,132,135,137],{"class":69,"line":131},5,[67,133,134],{"class":73},"\u003C\u002F",[67,136,78],{"class":77},[67,138,81],{"class":73},[44,140,141,142,144],{},"Le texte à l'intérieur de ",[25,143,54],{}," est le contenu par défaut, affiché si le parent ne donne rien. Le parent écrit son contenu entre les balises du composant :",[57,146,148],{"className":59,"code":147,"language":62,"meta":63,"style":63},"\u003Ctemplate>\n  \u003CEncadre>\n    \u003Cp>Prépare la pâte la veille.\u003C\u002Fp>\n  \u003C\u002FEncadre>\n\u003C\u002Ftemplate>\n",[25,149,150,158,167,180,188],{"__ignoreMap":63},[67,151,152,154,156],{"class":69,"line":70},[67,153,74],{"class":73},[67,155,78],{"class":77},[67,157,81],{"class":73},[67,159,160,162,165],{"class":69,"line":84},[67,161,87],{"class":73},[67,163,164],{"class":77},"Encadre",[67,166,81],{"class":73},[67,168,169,171,173,176,178],{"class":69,"line":106},[67,170,109],{"class":73},[67,172,44],{"class":77},[67,174,175],{"class":73},">Prépare la pâte la veille.\u003C\u002F",[67,177,44],{"class":77},[67,179,81],{"class":73},[67,181,182,184,186],{"class":69,"line":121},[67,183,124],{"class":73},[67,185,164],{"class":77},[67,187,81],{"class":73},[67,189,190,192,194],{"class":69,"line":131},[67,191,134],{"class":73},[67,193,78],{"class":77},[67,195,81],{"class":73},[10,197,199],{"id":198},"les-slots-nommés","Les slots nommés",[44,201,202,203,205],{},"Quand il y a plusieurs zones, on donne un nom à chaque ",[25,204,54],{},". Celui sans nom s'appelle le slot par défaut.",[57,207,210],{"className":59,"code":208,"filename":209,"language":62,"meta":63,"style":63},"\u003Ctemplate>\n  \u003Carticle>\n    \u003Cheader>\u003Cslot name=\"entete\" \u002F>\u003C\u002Fheader>\n    \u003Cmain>\u003Cslot \u002F>\u003C\u002Fmain>\n    \u003Cfooter>\u003Cslot name=\"pied\" \u002F>\u003C\u002Ffooter>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FCarteComplete.vue",[25,211,212,220,229,260,279,305,314],{"__ignoreMap":63},[67,213,214,216,218],{"class":69,"line":70},[67,215,74],{"class":73},[67,217,78],{"class":77},[67,219,81],{"class":73},[67,221,222,224,227],{"class":69,"line":84},[67,223,87],{"class":73},[67,225,226],{"class":77},"article",[67,228,81],{"class":73},[67,230,231,233,236,239,241,244,246,249,253,256,258],{"class":69,"line":106},[67,232,109],{"class":73},[67,234,235],{"class":77},"header",[67,237,238],{"class":73},">\u003C",[67,240,50],{"class":77},[67,242,243],{"class":93}," name",[67,245,97],{"class":73},[67,247,248],{"class":100},"\"entete\"",[67,250,252],{"class":251},"st2BK"," \u002F",[67,254,255],{"class":73},">\u003C\u002F",[67,257,235],{"class":77},[67,259,81],{"class":73},[67,261,262,264,267,269,271,273,275,277],{"class":69,"line":121},[67,263,109],{"class":73},[67,265,266],{"class":77},"main",[67,268,238],{"class":73},[67,270,50],{"class":77},[67,272,252],{"class":251},[67,274,255],{"class":73},[67,276,266],{"class":77},[67,278,81],{"class":73},[67,280,281,283,286,288,290,292,294,297,299,301,303],{"class":69,"line":131},[67,282,109],{"class":73},[67,284,285],{"class":77},"footer",[67,287,238],{"class":73},[67,289,50],{"class":77},[67,291,243],{"class":93},[67,293,97],{"class":73},[67,295,296],{"class":100},"\"pied\"",[67,298,252],{"class":251},[67,300,255],{"class":73},[67,302,285],{"class":77},[67,304,81],{"class":73},[67,306,308,310,312],{"class":69,"line":307},6,[67,309,124],{"class":73},[67,311,226],{"class":77},[67,313,81],{"class":73},[67,315,317,319,321],{"class":69,"line":316},7,[67,318,134],{"class":73},[67,320,78],{"class":77},[67,322,81],{"class":73},[44,324,325,326,329,330,333,334,337],{},"Le parent cible chaque zone avec ",[25,327,328],{},"v-slot:nom",", ou son raccourci ",[25,331,332],{},"#nom",", sur une balise ",[25,335,336],{},"\u003Ctemplate>"," :",[57,339,341],{"className":59,"code":340,"language":62,"meta":63,"style":63},"\u003Ctemplate>\n  \u003CCarteComplete>\n    \u003Ctemplate #entete>\n      \u003Ch3>Tarte aux pommes\u003C\u002Fh3>\n    \u003C\u002Ftemplate>\n\n    \u003Cp>Étale la pâte, ajoute les pommes.\u003C\u002Fp>\n\n    \u003Ctemplate #pied>\n      \u003Csmall>Temps : 45 min\u003C\u002Fsmall>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCarteComplete>\n\u003C\u002Ftemplate>\n",[25,342,343,351,360,374,389,398,404,417,422,436,451,460,469],{"__ignoreMap":63},[67,344,345,347,349],{"class":69,"line":70},[67,346,74],{"class":73},[67,348,78],{"class":77},[67,350,81],{"class":73},[67,352,353,355,358],{"class":69,"line":84},[67,354,87],{"class":73},[67,356,357],{"class":77},"CarteComplete",[67,359,81],{"class":73},[67,361,362,364,366,369,372],{"class":69,"line":106},[67,363,109],{"class":73},[67,365,78],{"class":77},[67,367,368],{"class":73}," #",[67,370,371],{"class":93},"entete",[67,373,81],{"class":73},[67,375,376,379,382,385,387],{"class":69,"line":121},[67,377,378],{"class":73},"      \u003C",[67,380,381],{"class":77},"h3",[67,383,384],{"class":73},">Tarte aux pommes\u003C\u002F",[67,386,381],{"class":77},[67,388,81],{"class":73},[67,390,391,394,396],{"class":69,"line":131},[67,392,393],{"class":73},"    \u003C\u002F",[67,395,78],{"class":77},[67,397,81],{"class":73},[67,399,400],{"class":69,"line":307},[67,401,403],{"emptyLinePlaceholder":402},true,"\n",[67,405,406,408,410,413,415],{"class":69,"line":316},[67,407,109],{"class":73},[67,409,44],{"class":77},[67,411,412],{"class":73},">Étale la pâte, ajoute les pommes.\u003C\u002F",[67,414,44],{"class":77},[67,416,81],{"class":73},[67,418,420],{"class":69,"line":419},8,[67,421,403],{"emptyLinePlaceholder":402},[67,423,425,427,429,431,434],{"class":69,"line":424},9,[67,426,109],{"class":73},[67,428,78],{"class":77},[67,430,368],{"class":73},[67,432,433],{"class":93},"pied",[67,435,81],{"class":73},[67,437,439,441,444,447,449],{"class":69,"line":438},10,[67,440,378],{"class":73},[67,442,443],{"class":77},"small",[67,445,446],{"class":73},">Temps : 45 min\u003C\u002F",[67,448,443],{"class":77},[67,450,81],{"class":73},[67,452,454,456,458],{"class":69,"line":453},11,[67,455,393],{"class":73},[67,457,78],{"class":77},[67,459,81],{"class":73},[67,461,463,465,467],{"class":69,"line":462},12,[67,464,124],{"class":73},[67,466,357],{"class":77},[67,468,81],{"class":73},[67,470,472,474,476],{"class":69,"line":471},13,[67,473,134],{"class":73},[67,475,78],{"class":77},[67,477,81],{"class":73},[44,479,480,481,483],{},"Le contenu qui n'est dans aucun ",[25,482,336],{}," va dans le slot par défaut.",[10,485,487],{"id":486},"observer-un-changement-watch","Observer un changement : watch",[44,489,490,491,28],{},"Parfois, un changement doit déclencher une action : enregistrer, appeler une API, écrire dans la console. C'est le rôle de ",[25,492,27],{},[57,494,496],{"className":59,"code":495,"language":62,"meta":63,"style":63},"\u003Cscript setup>\nimport { ref, watch } from 'vue'\n\nconst portions = ref(4)\n\nwatch(portions, (nouvelle, ancienne) => {\n  console.log(`Portions : ${ancienne} -> ${nouvelle}`)\n})\n\u003C\u002Fscript>\n",[25,497,498,510,525,529,553,557,584,609,614],{"__ignoreMap":63},[67,499,500,502,505,508],{"class":69,"line":70},[67,501,74],{"class":73},[67,503,504],{"class":77},"script",[67,506,507],{"class":93}," setup",[67,509,81],{"class":73},[67,511,512,516,519,522],{"class":69,"line":84},[67,513,515],{"class":514},"sOnC1","import",[67,517,518],{"class":73}," { ref, watch } ",[67,520,521],{"class":514},"from",[67,523,524],{"class":100}," 'vue'\n",[67,526,527],{"class":69,"line":106},[67,528,403],{"emptyLinePlaceholder":402},[67,530,531,534,537,540,544,547,550],{"class":69,"line":121},[67,532,533],{"class":514},"const",[67,535,536],{"class":93}," portions",[67,538,539],{"class":514}," =",[67,541,543],{"class":542},"syCW7"," ref",[67,545,546],{"class":73},"(",[67,548,549],{"class":93},"4",[67,551,552],{"class":73},")\n",[67,554,555],{"class":69,"line":131},[67,556,403],{"emptyLinePlaceholder":402},[67,558,559,562,565,569,572,575,578,581],{"class":69,"line":307},[67,560,561],{"class":542},"watch",[67,563,564],{"class":73},"(portions, (",[67,566,568],{"class":567},"sIXEE","nouvelle",[67,570,571],{"class":73},", ",[67,573,574],{"class":567},"ancienne",[67,576,577],{"class":73},") ",[67,579,580],{"class":514},"=>",[67,582,583],{"class":73}," {\n",[67,585,586,589,592,594,597,599,602,604,607],{"class":69,"line":316},[67,587,588],{"class":73},"  console.",[67,590,591],{"class":542},"log",[67,593,546],{"class":73},[67,595,596],{"class":100},"`Portions : ${",[67,598,574],{"class":73},[67,600,601],{"class":100},"} -> ${",[67,603,568],{"class":73},[67,605,606],{"class":100},"}`",[67,608,552],{"class":73},[67,610,611],{"class":69,"line":419},[67,612,613],{"class":73},"})\n",[67,615,616,618,620],{"class":69,"line":424},[67,617,134],{"class":73},[67,619,504],{"class":77},[67,621,81],{"class":73},[44,623,624],{},"Le premier argument est la source à surveiller, le second la fonction appelée à chaque changement. Elle reçoit la nouvelle valeur puis l'ancienne.",[44,626,627,628,631],{},"Pour surveiller une propriété d'un objet réactif, passe une fonction qui la lit (un ",[48,629,630],{},"getter",") :",[57,633,637],{"className":634,"code":635,"language":636,"meta":63,"style":63},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","watch(\n  () => recette.nom,\n  (nom) => console.log('Nom :', nom)\n)\n","js",[25,638,639,646,656,681],{"__ignoreMap":63},[67,640,641,643],{"class":69,"line":70},[67,642,561],{"class":542},[67,644,645],{"class":73},"(\n",[67,647,648,651,653],{"class":69,"line":84},[67,649,650],{"class":73},"  () ",[67,652,580],{"class":514},[67,654,655],{"class":73}," recette.nom,\n",[67,657,658,661,664,666,668,671,673,675,678],{"class":69,"line":106},[67,659,660],{"class":73},"  (",[67,662,663],{"class":567},"nom",[67,665,577],{"class":73},[67,667,580],{"class":514},[67,669,670],{"class":73}," console.",[67,672,591],{"class":542},[67,674,546],{"class":73},[67,676,677],{"class":100},"'Nom :'",[67,679,680],{"class":73},", nom)\n",[67,682,683],{"class":69,"line":121},[67,684,552],{"class":73},[44,686,687,688,691],{},"Avec l'option ",[25,689,690],{},"{ immediate: true }",", la fonction s'exécute aussi une première fois, dès la création du composant.",[10,693,695],{"id":694},"watcheffect-sans-source-explicite","watchEffect : sans source explicite",[44,697,698,701],{},[25,699,700],{},"watchEffect()"," exécute sa fonction tout de suite et repère seul les valeurs réactives qu'elle lit.",[57,703,705],{"className":634,"code":704,"language":636,"meta":63,"style":63},"watchEffect(() => {\n  console.log('Portions actuelles :', portions.value)\n})\n",[25,706,707,719,733],{"__ignoreMap":63},[67,708,709,712,715,717],{"class":69,"line":70},[67,710,711],{"class":542},"watchEffect",[67,713,714],{"class":73},"(() ",[67,716,580],{"class":514},[67,718,583],{"class":73},[67,720,721,723,725,727,730],{"class":69,"line":84},[67,722,588],{"class":73},[67,724,591],{"class":542},[67,726,546],{"class":73},[67,728,729],{"class":100},"'Portions actuelles :'",[67,731,732],{"class":73},", portions.value)\n",[67,734,735],{"class":69,"line":106},[67,736,613],{"class":73},[44,738,739,740,742,743,745],{},"Choisis ",[25,741,27],{}," quand tu veux contrôler la source et connaître l'ancienne valeur, ",[25,744,700],{}," quand c'est plus court.",[747,748,749],"tip",{},[44,750,751,752,755,756,758],{},"Si tu veux seulement calculer une valeur à partir d'autres, utilise ",[25,753,754],{},"computed()",". Réserve ",[25,757,27],{}," aux actions, comme un appel réseau.",[10,760,762],{"id":761},"le-cycle-de-vie","Le cycle de vie",[44,764,765,766,769],{},"Un composant a une vie : il est créé, affiché dans la page, mis à jour, puis retiré. Les ",[48,767,768],{},"hooks de cycle de vie"," sont des fonctions que Vue appelle à ces moments.",[771,772,773,786],"table",{},[774,775,776],"thead",{},[777,778,779,783],"tr",{},[780,781,782],"th",{},"Hook",[780,784,785],{},"Moment",[787,788,789,800,810],"tbody",{},[777,790,791,797],{},[792,793,794],"td",{},[25,795,796],{},"onMounted",[792,798,799],{},"Après le premier affichage : les éléments existent dans la page.",[777,801,802,807],{},[792,803,804],{},[25,805,806],{},"onUpdated",[792,808,809],{},"Après chaque nouvel affichage dû à un changement.",[777,811,812,817],{},[792,813,814],{},[25,815,816],{},"onUnmounted",[792,818,819],{},"Quand le composant est retiré.",[57,821,823],{"className":59,"code":822,"language":62,"meta":63,"style":63},"\u003Cscript setup>\nimport { onMounted, onUnmounted } from 'vue'\n\nfunction surScroll() {\n  console.log('Défilement')\n}\n\nonMounted(() => window.addEventListener('scroll', surScroll))\nonUnmounted(() => window.removeEventListener('scroll', surScroll))\n\u003C\u002Fscript>\n",[25,824,825,835,846,850,861,874,879,883,905,924],{"__ignoreMap":63},[67,826,827,829,831,833],{"class":69,"line":70},[67,828,74],{"class":73},[67,830,504],{"class":77},[67,832,507],{"class":93},[67,834,81],{"class":73},[67,836,837,839,842,844],{"class":69,"line":84},[67,838,515],{"class":514},[67,840,841],{"class":73}," { onMounted, onUnmounted } ",[67,843,521],{"class":514},[67,845,524],{"class":100},[67,847,848],{"class":69,"line":106},[67,849,403],{"emptyLinePlaceholder":402},[67,851,852,855,858],{"class":69,"line":121},[67,853,854],{"class":514},"function",[67,856,857],{"class":542}," surScroll",[67,859,860],{"class":73},"() {\n",[67,862,863,865,867,869,872],{"class":69,"line":131},[67,864,588],{"class":73},[67,866,591],{"class":542},[67,868,546],{"class":73},[67,870,871],{"class":100},"'Défilement'",[67,873,552],{"class":73},[67,875,876],{"class":69,"line":307},[67,877,878],{"class":73},"}\n",[67,880,881],{"class":69,"line":316},[67,882,403],{"emptyLinePlaceholder":402},[67,884,885,887,889,891,894,897,899,902],{"class":69,"line":419},[67,886,796],{"class":542},[67,888,714],{"class":73},[67,890,580],{"class":514},[67,892,893],{"class":73}," window.",[67,895,896],{"class":542},"addEventListener",[67,898,546],{"class":73},[67,900,901],{"class":100},"'scroll'",[67,903,904],{"class":73},", surScroll))\n",[67,906,907,909,911,913,915,918,920,922],{"class":69,"line":424},[67,908,816],{"class":542},[67,910,714],{"class":73},[67,912,580],{"class":514},[67,914,893],{"class":73},[67,916,917],{"class":542},"removeEventListener",[67,919,546],{"class":73},[67,921,901],{"class":100},[67,923,904],{"class":73},[67,925,926,928,930],{"class":69,"line":438},[67,927,134],{"class":73},[67,929,504],{"class":77},[67,931,81],{"class":73},[44,933,934],{},"On branche l'écouteur au montage et on le retire à la fin pour ne rien laisser tourner dans le vide.",[936,937,938],"warning",{},[44,939,940,941,944,945,948],{},"Appelle les hooks directement dans ",[25,942,943],{},"\u003Cscript setup>",", au moment de l'initialisation. Dans un ",[25,946,947],{},"setTimeout",", par exemple, ils ne fonctionneraient pas.",[10,950,952],{"id":951},"à-retenir","À retenir",[15,954,955,964,975,981,988],{},[18,956,957,958,960,961,963],{},"Un ",[25,959,54],{}," laisse le parent fournir du contenu ; le texte dans le ",[25,962,54],{}," est la valeur par défaut.",[18,965,966,967,970,971,974],{},"Un slot nommé s'écrit ",[25,968,969],{},"\u003Cslot name=\"entete\" \u002F>"," côté enfant et ",[25,972,973],{},"\u003Ctemplate #entete>"," côté parent.",[18,976,977,980],{},[25,978,979],{},"watch(source, fonction)"," réagit à un changement et reçoit la nouvelle et l'ancienne valeur.",[18,982,983,984,987],{},"Un getter ",[25,985,986],{},"() => objet.propriete"," permet de surveiller une propriété d'un objet réactif.",[18,989,990,35,992,994],{},[25,991,796],{},[25,993,816],{}," encadrent la vie d'un composant : branche au montage, nettoie au démontage.",[996,997,998],"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 .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);}html pre.shiki code .st2BK, html code.shiki .st2BK{--shiki-light:#82071E;--shiki-light-font-style:italic;--shiki-default:#FFA198;--shiki-default-font-style:italic;--shiki-dark:#FFA198;--shiki-dark-font-style:italic}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}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}",{"title":63,"searchDepth":84,"depth":106,"links":1000},[1001,1002,1003,1004,1005,1006,1007],{"id":12,"depth":84,"text":13},{"id":41,"depth":84,"text":42},{"id":198,"depth":84,"text":199},{"id":486,"depth":84,"text":487},{"id":694,"depth":84,"text":695},{"id":761,"depth":84,"text":762},{"id":951,"depth":84,"text":952},"Laisser le parent fournir du contenu avec les slots, réagir aux changements avec watch et agir au bon moment avec onMounted.","md",{},[50,1012,561,711,796,816,1013,1014],"slot nommé","cycle de vie","immediate","intermediaire","\u002Fvue\u002Fslots-watch-et-cycle-de-vie",[1018],"\u002Fvue\u002Fprops-et-evenements",[1020,1024,1027],{"nom":1021,"url":1022,"type":1023},"Vue.js, slots (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fcomponents\u002Fslots.html","doc",{"nom":1025,"url":1026,"type":1023},"Vue.js, observateurs (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Fwatchers.html",{"nom":1028,"url":1029,"type":1023},"Vue.js, cycle de vie (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Flifecycle.html",{"title":5,"description":1008},[1032,1034,1036],{"nom":1033,"url":1022},"Slots (documentation officielle en français)",{"nom":1035,"url":1026},"Observateurs (documentation officielle en français)",{"nom":1037,"url":1029},"Hooks de cycle de vie (documentation officielle en français)","vue\u002F05.slots-watch-et-cycle-de-vie","JvZziO90wioNn7cFgvB-FFUcDzFmFs_TkCJ-wOKYWMA",[1041,1045,1049,1053,1056,1057,1061],{"path":1042,"title":1043,"stem":1044},"\u002Fvue\u002Fpremier-composant","Ton premier composant Vue","vue\u002F01.premier-composant",{"path":1046,"title":1047,"stem":1048},"\u002Fvue\u002Ftemplate-et-directives","Le template et les directives","vue\u002F02.template-et-directives",{"path":1050,"title":1051,"stem":1052},"\u002Fvue\u002Freactivite","La réactivité","vue\u002F03.reactivite",{"path":1018,"title":1054,"stem":1055},"Props, événements et v-model sur un composant","vue\u002F04.props-et-evenements",{"path":1016,"title":5,"stem":1038},{"path":1058,"title":1059,"stem":1060},"\u002Fvue\u002Fcomposables","Les composables","vue\u002F06.composables",{"path":1062,"title":1063,"stem":1064},"\u002Fvue","Vue","vue\u002Findex",[1066,1068],{"title":1054,"path":1018,"stem":1055,"description":1067,"children":-1},"Faire communiquer un composant parent et son enfant avec defineProps, defineEmits et defineModel.",{"title":1059,"path":1058,"stem":1060,"description":1069,"children":-1},"Extraire et réutiliser de la logique réactive entre plusieurs composants avec des fonctions useXxx.",[1071],{"path":1018,"title":1054,"ligne":62},[1073,1075,1076,1077,1078,1079,1081],{"path":1042,"title":1043,"niveau":1074,"stem":1044},"debutant",{"path":1046,"title":1047,"niveau":1074,"stem":1048},{"path":1050,"title":1051,"niveau":1074,"stem":1052},{"path":1018,"title":1054,"niveau":1015,"stem":1055},{"path":1016,"title":5,"niveau":1015,"stem":1038},{"path":1058,"title":1059,"niveau":1080,"stem":1060},"avance",{"path":1062,"title":1063,"niveau":1082,"stem":1064},"memo",1794583438834]