[{"data":1,"prerenderedAt":4607},["ShallowReactive",2],{"content-\u002Fcontents\u002Fvue3":3,"surroundPost-\u002Fcontents\u002Fvue3":4598},{"id":4,"title":5,"body":6,"createdAt":4585,"description":4586,"draft":4587,"extension":4588,"meta":4589,"navigation":127,"path":4590,"seo":4591,"stem":4592,"tags":4593,"thumbnail":4596,"updatedAt":4585,"__hash__":4597},"contents\u002Fcontents\u002Fvue3.md","Vue3の基本を再確認: コンポーネント間のやり取り、引数名、よくある疑問など",{"type":7,"value":8,"toc":4567},"minimark",[9,13,16,19,42,47,50,53,60,64,67,172,175,178,185,188,191,204,268,271,274,277,288,291,294,298,305,321,526,535,544,547,550,751,754,760,763,780,784,787,790,797,803,815,1020,1023,1030,1236,1239,1448,1458,1469,1483,1487,1490,1496,1507,1510,1649,1659,1662,1897,1911,1914,2126,2132,2135,2602,2609,2612,2623,2626,2629,2739,2742,2745,2795,2798,2805,2812,2815,2818,2820,3036,3051,3054,3180,3186,3189,3192,3195,3314,3324,3327,3436,3447,3457,3460,3565,3568,3571,3805,3808,3981,3984,3987,3990,3993,4072,4075,4082,4085,4088,4247,4254,4258,4261,4278,4284,4288,4291,4294,4301,4305,4308,4319,4322,4325,4547,4554,4557,4560,4563],[10,11,12],"p",{},"最近ブログをNuxt3とNuxt Content v2で作り替えました。その際にVue3でいろいろわからないことやなかなか覚えられないことがあったので学習および備忘録として残しておきます。",[10,14,15],{},"情報は可能な限り公式ドキュメントを参考にしていますが、認識ミス等があるかもです。",[10,17,18],{},"Nuxt Content関連の記事",[20,21,22,30,36],"ul",{},[23,24,25],"li",{},[26,27,29],"a",{"href":28},"nuxt-3nuxt-content-v2","Nuxt 3、Tailwind、Nuxt content v2によるブログ作成のための基本設定",[23,31,32],{},[26,33,35],{"href":34},"nuxt-content-v2","Nuxt Content v2を利用したMarkdownによるブログ記事の作成方法",[23,37,38],{},[26,39,41],{"href":40},"list-nuxt","Nuxt Content v2でリスト、タグページやページングを実現する方法",[43,44,46],"h2",{"id":45},"リアクティブな変数とはrefとは","リアクティブな変数とは？refとは",[10,48,49],{},"リアクティブ変数は単純にいうと、定義された変数を監視し、変更を検知したら再描画する変数のことです。",[10,51,52],{},"ユーザーの動的入力があった場合にいちいち関数を定義してDOMを操作しなくても表示が切り替わるので便利です。また値の変化に応じた細かい処理も実現しやすくなります。",[10,54,55,59],{},[56,57,58],"code",{},"ref()"," 関数はそんなリアクティブ変数を定義するvueの関数です。",[43,61,63],{"id":62},"computedの書き方","Computedの書き方",[10,65,66],{},"基本的な書き方は以下です。またcomputedで定義された変数もリアクティブな変数となります。",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-ts shiki shiki-themes github-dark","import {ref, computed} from 'vue'\nconst fuga = ref(0)\n\nconst hoge = computed(()=>{\n    return fuga.value * 2\n})\n","ts","",[56,75,76,96,122,129,151,166],{"__ignoreMap":73},[77,78,81,85,89,92],"span",{"class":79,"line":80},"line",1,[77,82,84],{"class":83},"snl16","import",[77,86,88],{"class":87},"s95oV"," {ref, computed} ",[77,90,91],{"class":83},"from",[77,93,95],{"class":94},"sU2Wk"," 'vue'\n",[77,97,99,102,106,109,113,116,119],{"class":79,"line":98},2,[77,100,101],{"class":83},"const",[77,103,105],{"class":104},"sDLfK"," fuga",[77,107,108],{"class":83}," =",[77,110,112],{"class":111},"svObZ"," ref",[77,114,115],{"class":87},"(",[77,117,118],{"class":104},"0",[77,120,121],{"class":87},")\n",[77,123,125],{"class":79,"line":124},3,[77,126,128],{"emptyLinePlaceholder":127},true,"\n",[77,130,132,134,137,139,142,145,148],{"class":79,"line":131},4,[77,133,101],{"class":83},[77,135,136],{"class":104}," hoge",[77,138,108],{"class":83},[77,140,141],{"class":111}," computed",[77,143,144],{"class":87},"(()",[77,146,147],{"class":83},"=>",[77,149,150],{"class":87},"{\n",[77,152,154,157,160,163],{"class":79,"line":153},5,[77,155,156],{"class":83},"    return",[77,158,159],{"class":87}," fuga.value ",[77,161,162],{"class":83},"*",[77,164,165],{"class":104}," 2\n",[77,167,169],{"class":79,"line":168},6,[77,170,171],{"class":87},"})\n",[10,173,174],{},"使い所としては単一のリアクティブな変数で表現が難しい計算や条件式を使いたい場合に使用しています。",[10,176,177],{},"例えば、表示切り替え用のフラグなどは他のいくつかの変数の値の組み合わせて切り替えたい時があります。",[10,179,180,181,184],{},"そういった時に",[56,182,183],{},"computed","は参照している値が変わったことを検知して計算を実行してくれるので非常に便利です。",[10,186,187],{},"なのでリアクティブな変数とセットで使うことが多い気がします。",[10,189,190],{},"また、先ほどの書き方は単純に値を返すだけですがsetすることもできます。setをなぜ使いたいのかというと、後で書きますが子コンポーネントに渡ったpropsは基本的にリアクティブじゃないので変更しても親コンポーネント側に反映できません。",[10,192,193,194,197,198,200,201,203],{},"反映させるには",[56,195,196],{},"emit","を使用するのですが、この時に",[56,199,183],{},"を使うと定義された変数はリアクティブなので動的な表示と",[56,202,196],{},"を利用した変更の受け渡しができるのです。",[68,205,207],{"className":70,"code":206,"language":72,"meta":73,"style":73},"const inVal = computed({\n  get: () => inputValue.value,\n  set: (val) => emit('hogeVal', val)\n})\n",[56,208,209,223,236,264],{"__ignoreMap":73},[77,210,211,213,216,218,220],{"class":79,"line":80},[77,212,101],{"class":83},[77,214,215],{"class":104}," inVal",[77,217,108],{"class":83},[77,219,141],{"class":111},[77,221,222],{"class":87},"({\n",[77,224,225,228,231,233],{"class":79,"line":98},[77,226,227],{"class":111},"  get",[77,229,230],{"class":87},": () ",[77,232,147],{"class":83},[77,234,235],{"class":87}," inputValue.value,\n",[77,237,238,241,244,248,251,253,256,258,261],{"class":79,"line":124},[77,239,240],{"class":111},"  set",[77,242,243],{"class":87},": (",[77,245,247],{"class":246},"s9osk","val",[77,249,250],{"class":87},") ",[77,252,147],{"class":83},[77,254,255],{"class":111}," emit",[77,257,115],{"class":87},[77,259,260],{"class":94},"'hogeVal'",[77,262,263],{"class":87},", val)\n",[77,265,266],{"class":79,"line":131},[77,267,171],{"class":87},[10,269,270],{},"ドキュメントを見るとこれはcomputedを使ったv-modelの実装方法と書かれています。v-modelを使わずにv-modelと同等のやり取りを親子間のコンポーネントで実現したい時に使います。",[43,272,273],{"id":273},"子コンポーネントと親コンポーネントのやり取り",[10,275,276],{},"vueではコンポーネントからコンポーネントを呼び出すことができます。一般的に呼び出し元を親コンポーネント、呼び出される側を子コンポーネントと呼びます。",[10,278,279,280,283,284,287],{},"コンポーネントは",[56,281,282],{},"components","ディレクトリに",[56,285,286],{},"*.vue","のファイル名でおきます。",[10,289,290],{},"使用する際は親コンポーネント側でimportして使用します。（Nuxt3ではimportを書く必要はないです）",[10,292,293],{},"親は子コンポーネントを呼び出す際に引数（props）を与えることができます。この渡し方をいつも忘れるので書いておきます。",[295,296,297],"h3",{"id":297},"子コンポーネントでの引数の受け取り方",[10,299,300,301,304],{},"子コンポーネント側で引数を定義するには",[56,302,303],{},"defineProps()","を使います。",[10,306,307,309,310,313,314,316,317,320],{},[56,308,303],{},"の書き方は調べた限り",[56,311,312],{},"interface","で型を定義する方法と",[56,315,312],{},"と同様の内容を",[56,318,319],{},"defineProps","の引数に渡す、引数名だけ渡す3種類があります。",[68,322,324],{"className":70,"code":323,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\n\n\u002F\u002Fintefaceを使う方法\ninterface Props {\n    title: String\n}\nconst props = defineProps\u003CProps>()\n\u002F\u002FdefineProps\u003CProps>()\n\n\u002F\u002Fintefaceを使わない方法\n\u002F\u002FdefineProps\u003C{title: string}>()\n\u002F\u002FdefineProps(['title'])\n\u002F\u002Fconst props = defineProps(['title'])\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        {{ title }}\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        propsから参照しても同じ {{ props.title }}\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,325,326,343,347,353,363,374,379,400,406,411,417,423,429,435,440,451,456,466,477,483,493,502,508,517],{"__ignoreMap":73},[77,327,328,331,334,337,340],{"class":79,"line":80},[77,329,330],{"class":83},"\u003C",[77,332,333],{"class":87},"script setup lang",[77,335,336],{"class":83},"=",[77,338,339],{"class":94},"\"ts\"",[77,341,342],{"class":83},">\n",[77,344,345],{"class":79,"line":98},[77,346,128],{"emptyLinePlaceholder":127},[77,348,349],{"class":79,"line":124},[77,350,352],{"class":351},"sAwPA","\u002F\u002Fintefaceを使う方法\n",[77,354,355,357,360],{"class":79,"line":131},[77,356,312],{"class":83},[77,358,359],{"class":111}," Props",[77,361,362],{"class":87}," {\n",[77,364,365,368,371],{"class":79,"line":153},[77,366,367],{"class":246},"    title",[77,369,370],{"class":83},":",[77,372,373],{"class":111}," String\n",[77,375,376],{"class":79,"line":168},[77,377,378],{"class":87},"}\n",[77,380,382,384,387,389,392,394,397],{"class":79,"line":381},7,[77,383,101],{"class":83},[77,385,386],{"class":104}," props",[77,388,108],{"class":83},[77,390,391],{"class":111}," defineProps",[77,393,330],{"class":87},[77,395,396],{"class":111},"Props",[77,398,399],{"class":87},">()\n",[77,401,403],{"class":79,"line":402},8,[77,404,405],{"class":351},"\u002F\u002FdefineProps\u003CProps>()\n",[77,407,409],{"class":79,"line":408},9,[77,410,128],{"emptyLinePlaceholder":127},[77,412,414],{"class":79,"line":413},10,[77,415,416],{"class":351},"\u002F\u002Fintefaceを使わない方法\n",[77,418,420],{"class":79,"line":419},11,[77,421,422],{"class":351},"\u002F\u002FdefineProps\u003C{title: string}>()\n",[77,424,426],{"class":79,"line":425},12,[77,427,428],{"class":351},"\u002F\u002FdefineProps(['title'])\n",[77,430,432],{"class":79,"line":431},13,[77,433,434],{"class":351},"\u002F\u002Fconst props = defineProps(['title'])\n",[77,436,438],{"class":79,"line":437},14,[77,439,128],{"emptyLinePlaceholder":127},[77,441,443,446,449],{"class":79,"line":442},15,[77,444,445],{"class":83},"\u003C\u002F",[77,447,448],{"class":87},"script",[77,450,342],{"class":83},[77,452,454],{"class":79,"line":453},16,[77,455,128],{"emptyLinePlaceholder":127},[77,457,459,461,464],{"class":79,"line":458},17,[77,460,330],{"class":87},[77,462,463],{"class":111},"template",[77,465,342],{"class":87},[77,467,469,472,475],{"class":79,"line":468},18,[77,470,471],{"class":87},"    \u003C",[77,473,474],{"class":111},"div",[77,476,342],{"class":87},[77,478,480],{"class":79,"line":479},19,[77,481,482],{"class":87},"        {{ title }}\n",[77,484,486,489,491],{"class":79,"line":485},20,[77,487,488],{"class":83},"    \u003C\u002F",[77,490,474],{"class":87},[77,492,342],{"class":83},[77,494,496,498,500],{"class":79,"line":495},21,[77,497,471],{"class":87},[77,499,474],{"class":111},[77,501,342],{"class":87},[77,503,505],{"class":79,"line":504},22,[77,506,507],{"class":87},"        propsから参照しても同じ {{ props.title }}\n",[77,509,511,513,515],{"class":79,"line":510},23,[77,512,488],{"class":83},[77,514,474],{"class":87},[77,516,342],{"class":83},[77,518,520,522,524],{"class":79,"line":519},24,[77,521,445],{"class":83},[77,523,463],{"class":87},[77,525,342],{"class":83},[10,527,528,530,531,534],{},[56,529,303],{},"と書くだけでも引数に渡ってきた値をtemplateで使うことができます。ただ、一般的に",[56,532,533],{},"const props","に代入します。",[10,536,537,538,540,541,543],{},"実用上も",[56,539,312],{},"で型を定義して",[56,542,533],{},"に入れた方がわかりやすくて気に入ってます。",[10,545,546],{},"子コンポーネントに渡す引数の中には必須じゃないものがあり、それらにはデフォルト値を定義したい場合が結構あります。",[10,548,549],{},"デフォルト値を定義したい場合は以下のように書きます。",[68,551,553],{"className":70,"code":552,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\n\n\u002F\u002Fpropsのdefault値設定方法 1\ninterface Props {\n    title: string\n}\n\nconst props = withDefaults(defineProps\u003CProps>(), {\n    title: 'default値だよ'\n})\n\n\u002F\u002Fpropsのdefault値設定方法 2\n\u002F\u002F const props = defineProps({\n\u002F\u002F     title: {\n\u002F\u002F         type: String,\n\u002F\u002F         default: 'default値だよ'\n\u002F\u002F     }\n\u002F\u002F })\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        {{ title }}\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        propsから参照しても同じ {{ props.title }}\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,554,555,567,571,576,584,593,597,601,623,631,635,639,644,649,654,659,664,669,674,678,686,690,698,706,710,719,728,733,742],{"__ignoreMap":73},[77,556,557,559,561,563,565],{"class":79,"line":80},[77,558,330],{"class":83},[77,560,333],{"class":87},[77,562,336],{"class":83},[77,564,339],{"class":94},[77,566,342],{"class":83},[77,568,569],{"class":79,"line":98},[77,570,128],{"emptyLinePlaceholder":127},[77,572,573],{"class":79,"line":124},[77,574,575],{"class":351},"\u002F\u002Fpropsのdefault値設定方法 1\n",[77,577,578,580,582],{"class":79,"line":131},[77,579,312],{"class":83},[77,581,359],{"class":111},[77,583,362],{"class":87},[77,585,586,588,590],{"class":79,"line":153},[77,587,367],{"class":246},[77,589,370],{"class":83},[77,591,592],{"class":104}," string\n",[77,594,595],{"class":79,"line":168},[77,596,378],{"class":87},[77,598,599],{"class":79,"line":381},[77,600,128],{"emptyLinePlaceholder":127},[77,602,603,605,607,609,612,614,616,618,620],{"class":79,"line":402},[77,604,101],{"class":83},[77,606,386],{"class":104},[77,608,108],{"class":83},[77,610,611],{"class":111}," withDefaults",[77,613,115],{"class":87},[77,615,319],{"class":111},[77,617,330],{"class":87},[77,619,396],{"class":111},[77,621,622],{"class":87},">(), {\n",[77,624,625,628],{"class":79,"line":408},[77,626,627],{"class":87},"    title: ",[77,629,630],{"class":94},"'default値だよ'\n",[77,632,633],{"class":79,"line":413},[77,634,171],{"class":87},[77,636,637],{"class":79,"line":419},[77,638,128],{"emptyLinePlaceholder":127},[77,640,641],{"class":79,"line":425},[77,642,643],{"class":351},"\u002F\u002Fpropsのdefault値設定方法 2\n",[77,645,646],{"class":79,"line":431},[77,647,648],{"class":351},"\u002F\u002F const props = defineProps({\n",[77,650,651],{"class":79,"line":437},[77,652,653],{"class":351},"\u002F\u002F     title: {\n",[77,655,656],{"class":79,"line":442},[77,657,658],{"class":351},"\u002F\u002F         type: String,\n",[77,660,661],{"class":79,"line":453},[77,662,663],{"class":351},"\u002F\u002F         default: 'default値だよ'\n",[77,665,666],{"class":79,"line":458},[77,667,668],{"class":351},"\u002F\u002F     }\n",[77,670,671],{"class":79,"line":468},[77,672,673],{"class":351},"\u002F\u002F })\n",[77,675,676],{"class":79,"line":479},[77,677,128],{"emptyLinePlaceholder":127},[77,679,680,682,684],{"class":79,"line":485},[77,681,445],{"class":83},[77,683,448],{"class":87},[77,685,342],{"class":83},[77,687,688],{"class":79,"line":495},[77,689,128],{"emptyLinePlaceholder":127},[77,691,692,694,696],{"class":79,"line":504},[77,693,330],{"class":87},[77,695,463],{"class":111},[77,697,342],{"class":87},[77,699,700,702,704],{"class":79,"line":510},[77,701,471],{"class":87},[77,703,474],{"class":111},[77,705,342],{"class":87},[77,707,708],{"class":79,"line":519},[77,709,482],{"class":87},[77,711,713,715,717],{"class":79,"line":712},25,[77,714,488],{"class":83},[77,716,474],{"class":87},[77,718,342],{"class":83},[77,720,722,724,726],{"class":79,"line":721},26,[77,723,471],{"class":87},[77,725,474],{"class":111},[77,727,342],{"class":87},[77,729,731],{"class":79,"line":730},27,[77,732,507],{"class":87},[77,734,736,738,740],{"class":79,"line":735},28,[77,737,488],{"class":83},[77,739,474],{"class":87},[77,741,342],{"class":83},[77,743,745,747,749],{"class":79,"line":744},29,[77,746,445],{"class":83},[77,748,463],{"class":87},[77,750,342],{"class":83},[10,752,753],{},"上記のようにdefault値の定義の仕方も2通りあります。ドキュメントを見た感じ前者はTypeScript使用時向けで後者は普通に使うひと向けっぽいです。\n前者が後者にコンパイルされるようです。",[755,756,757],"blockquote",{},[10,758,759],{},"For example, defineProps\u003C{ msg: string }> will be compiled into { msg: { type: String, required: true }}.",[10,761,762],{},"参考：",[20,764,765,773],{},[23,766,767],{},[26,768,772],{"href":769,"rel":770},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fprops.html#prop-validation",[771],"nofollow","Prop Validation",[23,774,775],{},[26,776,779],{"href":777,"rel":778},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Fcomposition-api.html#typing-component-props",[771],"TypeScript with Composition API",[295,781,783],{"id":782},"親コンポーネントから子コンポーネントへの変数関数の渡し方","親コンポーネントから子コンポーネントへの変数、関数の渡し方",[10,785,786],{},"子コンポーネント側からpropsでもらった親コンポーネントの値はemitしないと変更できません。",[10,788,789],{},"親側が子コンポーネントに変数や関数を発火するための要素を渡す方法についてです。",[10,791,792,793,796],{},"子コンポーネントで使用する変数を渡すだけなら",[56,794,795],{},"\u003CComponentName :変数名 \u002F>","でいけます。静的な値の場合はコロンがなくてもいいです。",[10,798,799,800,802],{},"子コンポーネント側から親側の関数を呼びたい（親の持つ変数を変更したい）場合には",[56,801,196],{},"を使用します。",[10,804,805,806,808,809,814],{},"以下は子コンポーネント側の",[56,807,196],{},"の定義方法です。コードは",[26,810,813],{"href":811,"rel":812},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fevents.html",[771],"コンポーネントのイベント","からの引用です。",[68,816,818],{"className":70,"code":817,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\n\u002F\u002F 実行時の宣言\nconst emit = defineEmits(['change', 'update'])\n\n\u002F\u002F 型ベースの宣言\nconst emit = defineEmits\u003C{\n  (e: 'change', id: number): void\n  (e: 'update', value: string): void\n}>()\n\n\u002F\u002F 3.3+: より簡潔な代替の構文\nconst emit = defineEmits\u003C{\n  change: [id: number]\n  update: [value: string]\n}>()\n\u003C\u002Fscript>\n",[56,819,820,832,837,863,867,872,885,916,943,948,952,957,969,990,1008,1012],{"__ignoreMap":73},[77,821,822,824,826,828,830],{"class":79,"line":80},[77,823,330],{"class":83},[77,825,333],{"class":87},[77,827,336],{"class":83},[77,829,339],{"class":94},[77,831,342],{"class":83},[77,833,834],{"class":79,"line":98},[77,835,836],{"class":351},"\u002F\u002F 実行時の宣言\n",[77,838,839,841,843,845,848,851,854,857,860],{"class":79,"line":124},[77,840,101],{"class":83},[77,842,255],{"class":104},[77,844,108],{"class":83},[77,846,847],{"class":111}," defineEmits",[77,849,850],{"class":87},"([",[77,852,853],{"class":94},"'change'",[77,855,856],{"class":87},", ",[77,858,859],{"class":94},"'update'",[77,861,862],{"class":87},"])\n",[77,864,865],{"class":79,"line":131},[77,866,128],{"emptyLinePlaceholder":127},[77,868,869],{"class":79,"line":153},[77,870,871],{"class":351},"\u002F\u002F 型ベースの宣言\n",[77,873,874,876,878,880,882],{"class":79,"line":168},[77,875,101],{"class":83},[77,877,255],{"class":104},[77,879,108],{"class":83},[77,881,847],{"class":111},[77,883,884],{"class":87},"\u003C{\n",[77,886,887,890,893,895,898,900,903,905,908,911,913],{"class":79,"line":381},[77,888,889],{"class":87},"  (",[77,891,892],{"class":246},"e",[77,894,370],{"class":83},[77,896,897],{"class":94}," 'change'",[77,899,856],{"class":87},[77,901,902],{"class":246},"id",[77,904,370],{"class":83},[77,906,907],{"class":104}," number",[77,909,910],{"class":87},")",[77,912,370],{"class":83},[77,914,915],{"class":104}," void\n",[77,917,918,920,922,924,927,929,932,934,937,939,941],{"class":79,"line":402},[77,919,889],{"class":87},[77,921,892],{"class":246},[77,923,370],{"class":83},[77,925,926],{"class":94}," 'update'",[77,928,856],{"class":87},[77,930,931],{"class":246},"value",[77,933,370],{"class":83},[77,935,936],{"class":104}," string",[77,938,910],{"class":87},[77,940,370],{"class":83},[77,942,915],{"class":104},[77,944,945],{"class":79,"line":408},[77,946,947],{"class":87},"}>()\n",[77,949,950],{"class":79,"line":413},[77,951,128],{"emptyLinePlaceholder":127},[77,953,954],{"class":79,"line":419},[77,955,956],{"class":351},"\u002F\u002F 3.3+: より簡潔な代替の構文\n",[77,958,959,961,963,965,967],{"class":79,"line":425},[77,960,101],{"class":83},[77,962,255],{"class":104},[77,964,108],{"class":83},[77,966,847],{"class":111},[77,968,884],{"class":87},[77,970,971,974,976,979,981,984,987],{"class":79,"line":431},[77,972,973],{"class":246},"  change",[77,975,370],{"class":83},[77,977,978],{"class":87}," [",[77,980,902],{"class":111},[77,982,983],{"class":87},": ",[77,985,986],{"class":104},"number",[77,988,989],{"class":87},"]\n",[77,991,992,995,997,999,1001,1003,1006],{"class":79,"line":437},[77,993,994],{"class":246},"  update",[77,996,370],{"class":83},[77,998,978],{"class":87},[77,1000,931],{"class":111},[77,1002,983],{"class":87},[77,1004,1005],{"class":104},"string",[77,1007,989],{"class":87},[77,1009,1010],{"class":79,"line":442},[77,1011,947],{"class":87},[77,1013,1014,1016,1018],{"class":79,"line":453},[77,1015,445],{"class":83},[77,1017,448],{"class":87},[77,1019,342],{"class":83},[10,1021,1022],{},"真ん中の書き方が明示的で好みなのでよく使います。",[10,1024,1025,1026,1029],{},"以下は簡単な例です。まずは子コンポーネント側の",[56,1027,1028],{},"EventTest.vue","です。",[68,1031,1033],{"className":70,"code":1032,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\ninterface Props {\n    title: string\n}\nconst props = defineProps\u003CProps>()\n\nconst emits = defineEmits\u003C{\n    (e: 'change-name', val: string): void\n}>()\n\nconst testEmit = () => {\n    emits('change-name', \"変更後\")\n}\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cbutton @click=\"testEmit\" type=\"button\">{{ props.title }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[56,1034,1035,1047,1055,1063,1067,1083,1087,1100,1126,1130,1134,1150,1167,1171,1175,1183,1187,1195,1228],{"__ignoreMap":73},[77,1036,1037,1039,1041,1043,1045],{"class":79,"line":80},[77,1038,330],{"class":83},[77,1040,333],{"class":87},[77,1042,336],{"class":83},[77,1044,339],{"class":94},[77,1046,342],{"class":83},[77,1048,1049,1051,1053],{"class":79,"line":98},[77,1050,312],{"class":83},[77,1052,359],{"class":111},[77,1054,362],{"class":87},[77,1056,1057,1059,1061],{"class":79,"line":124},[77,1058,367],{"class":246},[77,1060,370],{"class":83},[77,1062,592],{"class":104},[77,1064,1065],{"class":79,"line":131},[77,1066,378],{"class":87},[77,1068,1069,1071,1073,1075,1077,1079,1081],{"class":79,"line":153},[77,1070,101],{"class":83},[77,1072,386],{"class":104},[77,1074,108],{"class":83},[77,1076,391],{"class":111},[77,1078,330],{"class":87},[77,1080,396],{"class":111},[77,1082,399],{"class":87},[77,1084,1085],{"class":79,"line":168},[77,1086,128],{"emptyLinePlaceholder":127},[77,1088,1089,1091,1094,1096,1098],{"class":79,"line":381},[77,1090,101],{"class":83},[77,1092,1093],{"class":104}," emits",[77,1095,108],{"class":83},[77,1097,847],{"class":111},[77,1099,884],{"class":87},[77,1101,1102,1105,1107,1109,1112,1114,1116,1118,1120,1122,1124],{"class":79,"line":402},[77,1103,1104],{"class":87},"    (",[77,1106,892],{"class":246},[77,1108,370],{"class":83},[77,1110,1111],{"class":94}," 'change-name'",[77,1113,856],{"class":87},[77,1115,247],{"class":246},[77,1117,370],{"class":83},[77,1119,936],{"class":104},[77,1121,910],{"class":87},[77,1123,370],{"class":83},[77,1125,915],{"class":104},[77,1127,1128],{"class":79,"line":408},[77,1129,947],{"class":87},[77,1131,1132],{"class":79,"line":413},[77,1133,128],{"emptyLinePlaceholder":127},[77,1135,1136,1138,1141,1143,1146,1148],{"class":79,"line":419},[77,1137,101],{"class":83},[77,1139,1140],{"class":111}," testEmit",[77,1142,108],{"class":83},[77,1144,1145],{"class":87}," () ",[77,1147,147],{"class":83},[77,1149,362],{"class":87},[77,1151,1152,1155,1157,1160,1162,1165],{"class":79,"line":425},[77,1153,1154],{"class":111},"    emits",[77,1156,115],{"class":87},[77,1158,1159],{"class":94},"'change-name'",[77,1161,856],{"class":87},[77,1163,1164],{"class":94},"\"変更後\"",[77,1166,121],{"class":87},[77,1168,1169],{"class":79,"line":431},[77,1170,378],{"class":87},[77,1172,1173],{"class":79,"line":437},[77,1174,128],{"emptyLinePlaceholder":127},[77,1176,1177,1179,1181],{"class":79,"line":442},[77,1178,445],{"class":83},[77,1180,448],{"class":87},[77,1182,342],{"class":83},[77,1184,1185],{"class":79,"line":453},[77,1186,128],{"emptyLinePlaceholder":127},[77,1188,1189,1191,1193],{"class":79,"line":458},[77,1190,330],{"class":87},[77,1192,463],{"class":111},[77,1194,342],{"class":87},[77,1196,1197,1199,1202,1204,1207,1210,1212,1215,1218,1221,1223,1226],{"class":79,"line":468},[77,1198,471],{"class":83},[77,1200,1201],{"class":87},"button @click",[77,1203,336],{"class":83},[77,1205,1206],{"class":94},"\"testEmit\"",[77,1208,1209],{"class":87}," type",[77,1211,336],{"class":83},[77,1213,1214],{"class":94},"\"button\"",[77,1216,1217],{"class":83},">",[77,1219,1220],{"class":87},"{{ props.title }}",[77,1222,445],{"class":83},[77,1224,1225],{"class":87},"button",[77,1227,342],{"class":83},[77,1229,1230,1232,1234],{"class":79,"line":479},[77,1231,445],{"class":83},[77,1233,463],{"class":87},[77,1235,342],{"class":83},[10,1237,1238],{},"次は呼び出し側の親コンポーネントです。",[68,1240,1242],{"className":70,"code":1241,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport EventTest from '.\u002Fcomponents\u002FEventTest.vue'\n\nconst name = ref('test')\nconst test = 'button名'\n\nconst changeName = (val: string) => {\n  name.value = val\n}\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>    \n    {{ name }}\n    \u003CEventTest :title=\"test\" @change-name=\"changeName\" \u002F>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,1243,1244,1256,1271,1283,1287,1305,1317,1321,1345,1355,1359,1363,1371,1375,1383,1394,1399,1431,1440],{"__ignoreMap":73},[77,1245,1246,1248,1250,1252,1254],{"class":79,"line":80},[77,1247,330],{"class":83},[77,1249,333],{"class":87},[77,1251,336],{"class":83},[77,1253,339],{"class":94},[77,1255,342],{"class":83},[77,1257,1258,1260,1263,1265,1268],{"class":79,"line":98},[77,1259,84],{"class":83},[77,1261,1262],{"class":87}," { ref } ",[77,1264,91],{"class":83},[77,1266,1267],{"class":94}," 'vue'",[77,1269,1270],{"class":87},";\n",[77,1272,1273,1275,1278,1280],{"class":79,"line":124},[77,1274,84],{"class":83},[77,1276,1277],{"class":87}," EventTest ",[77,1279,91],{"class":83},[77,1281,1282],{"class":94}," '.\u002Fcomponents\u002FEventTest.vue'\n",[77,1284,1285],{"class":79,"line":131},[77,1286,128],{"emptyLinePlaceholder":127},[77,1288,1289,1291,1294,1296,1298,1300,1303],{"class":79,"line":153},[77,1290,101],{"class":83},[77,1292,1293],{"class":104}," name",[77,1295,108],{"class":83},[77,1297,112],{"class":111},[77,1299,115],{"class":87},[77,1301,1302],{"class":94},"'test'",[77,1304,121],{"class":87},[77,1306,1307,1309,1312,1314],{"class":79,"line":168},[77,1308,101],{"class":83},[77,1310,1311],{"class":104}," test",[77,1313,108],{"class":83},[77,1315,1316],{"class":94}," 'button名'\n",[77,1318,1319],{"class":79,"line":381},[77,1320,128],{"emptyLinePlaceholder":127},[77,1322,1323,1325,1328,1330,1333,1335,1337,1339,1341,1343],{"class":79,"line":402},[77,1324,101],{"class":83},[77,1326,1327],{"class":111}," changeName",[77,1329,108],{"class":83},[77,1331,1332],{"class":87}," (",[77,1334,247],{"class":246},[77,1336,370],{"class":83},[77,1338,936],{"class":104},[77,1340,250],{"class":87},[77,1342,147],{"class":83},[77,1344,362],{"class":87},[77,1346,1347,1350,1352],{"class":79,"line":408},[77,1348,1349],{"class":87},"  name.value ",[77,1351,336],{"class":83},[77,1353,1354],{"class":87}," val\n",[77,1356,1357],{"class":79,"line":413},[77,1358,378],{"class":87},[77,1360,1361],{"class":79,"line":419},[77,1362,128],{"emptyLinePlaceholder":127},[77,1364,1365,1367,1369],{"class":79,"line":425},[77,1366,445],{"class":83},[77,1368,448],{"class":87},[77,1370,342],{"class":83},[77,1372,1373],{"class":79,"line":431},[77,1374,128],{"emptyLinePlaceholder":127},[77,1376,1377,1379,1381],{"class":79,"line":437},[77,1378,330],{"class":87},[77,1380,463],{"class":111},[77,1382,342],{"class":87},[77,1384,1385,1388,1391],{"class":79,"line":442},[77,1386,1387],{"class":87},"  \u003C",[77,1389,1390],{"class":111},"main",[77,1392,1393],{"class":87},">    \n",[77,1395,1396],{"class":79,"line":453},[77,1397,1398],{"class":87},"    {{ name }}\n",[77,1400,1401,1403,1406,1409,1411,1414,1417,1420,1423,1425,1428],{"class":79,"line":458},[77,1402,471],{"class":83},[77,1404,1405],{"class":111},"EventTest",[77,1407,1408],{"class":87}," :title",[77,1410,336],{"class":83},[77,1412,1413],{"class":94},"\"test\"",[77,1415,1416],{"class":87}," @change",[77,1418,1419],{"class":83},"-",[77,1421,1422],{"class":87},"name",[77,1424,336],{"class":83},[77,1426,1427],{"class":94},"\"changeName\"",[77,1429,1430],{"class":83}," \u002F>\n",[77,1432,1433,1436,1438],{"class":79,"line":468},[77,1434,1435],{"class":83},"  \u003C\u002F",[77,1437,1390],{"class":87},[77,1439,342],{"class":83},[77,1441,1442,1444,1446],{"class":79,"line":479},[77,1443,445],{"class":83},[77,1445,463],{"class":87},[77,1447,342],{"class":83},[10,1449,1450,1451,1453,1454,1457],{},"これを実行するとボタンを押すと",[56,1452,1422],{},"の中身が",[56,1455,1456],{},"変更後","になります。",[10,1459,1460,1461,1464,1465,1468],{},"ポイントは親側で",[56,1462,1463],{},"props","の他に子側で発火する関数",[56,1466,1467],{},"@change-name=\"changeName\"","を渡していることです。",[10,1470,1471,1472,1475,1476,1478,1479,1482],{},"ただの変数の引数は",[56,1473,1474],{},":hoge","で渡して、子コンポーネントで",[56,1477,196],{},"で呼び出す関数は",[56,1480,1481],{},"@関数名","で書きます。",[295,1484,1486],{"id":1485},"v-modelを使うとどうなる","v-modelを使うとどうなる？",[10,1488,1489],{},"「v-modelを使うともっと簡単に親側の変数を変更できたはず・・・」といつも忘れて検索してしまいます。",[10,1491,1492,1493,1495],{},"v-modelを使って子コンポーネントに値を渡すと",[56,1494,196],{},"による書き換え処理が楽になります。",[10,1497,1498,1499,1502,1503,1506],{},"また何にでもv-modelが使えるのではなく、v-modelは基本的にを使うシーンはユーザー入力がある場合（",[56,1500,1501],{},"\u003Cinput>","や",[56,1504,1505],{},"\u003Cselect>","などを使うとき）です。",[10,1508,1509],{},"具体例は以下です。まずは親側です。",[68,1511,1513],{"className":70,"code":1512,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport VmodelTest from '.\u002Fcomponents\u002FVmodelTest.vue'\n\nconst name = ref('test')\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    {{ name }}\n    \u003CVmodelTest v-model=\"name\">\u003C\u002FVmodelTest>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,1514,1515,1527,1539,1551,1555,1571,1575,1583,1587,1595,1603,1607,1633,1641],{"__ignoreMap":73},[77,1516,1517,1519,1521,1523,1525],{"class":79,"line":80},[77,1518,330],{"class":83},[77,1520,333],{"class":87},[77,1522,336],{"class":83},[77,1524,339],{"class":94},[77,1526,342],{"class":83},[77,1528,1529,1531,1533,1535,1537],{"class":79,"line":98},[77,1530,84],{"class":83},[77,1532,1262],{"class":87},[77,1534,91],{"class":83},[77,1536,1267],{"class":94},[77,1538,1270],{"class":87},[77,1540,1541,1543,1546,1548],{"class":79,"line":124},[77,1542,84],{"class":83},[77,1544,1545],{"class":87}," VmodelTest ",[77,1547,91],{"class":83},[77,1549,1550],{"class":94}," '.\u002Fcomponents\u002FVmodelTest.vue'\n",[77,1552,1553],{"class":79,"line":131},[77,1554,128],{"emptyLinePlaceholder":127},[77,1556,1557,1559,1561,1563,1565,1567,1569],{"class":79,"line":153},[77,1558,101],{"class":83},[77,1560,1293],{"class":104},[77,1562,108],{"class":83},[77,1564,112],{"class":111},[77,1566,115],{"class":87},[77,1568,1302],{"class":94},[77,1570,121],{"class":87},[77,1572,1573],{"class":79,"line":168},[77,1574,128],{"emptyLinePlaceholder":127},[77,1576,1577,1579,1581],{"class":79,"line":381},[77,1578,445],{"class":83},[77,1580,448],{"class":87},[77,1582,342],{"class":83},[77,1584,1585],{"class":79,"line":402},[77,1586,128],{"emptyLinePlaceholder":127},[77,1588,1589,1591,1593],{"class":79,"line":408},[77,1590,330],{"class":87},[77,1592,463],{"class":111},[77,1594,342],{"class":87},[77,1596,1597,1599,1601],{"class":79,"line":413},[77,1598,1387],{"class":87},[77,1600,1390],{"class":111},[77,1602,342],{"class":87},[77,1604,1605],{"class":79,"line":419},[77,1606,1398],{"class":87},[77,1608,1609,1611,1614,1616,1619,1621,1624,1626,1628,1631],{"class":79,"line":425},[77,1610,471],{"class":83},[77,1612,1613],{"class":87},"VmodelTest v",[77,1615,1419],{"class":83},[77,1617,1618],{"class":87},"model",[77,1620,336],{"class":83},[77,1622,1623],{"class":94},"\"name\"",[77,1625,1217],{"class":83},[77,1627,445],{"class":87},[77,1629,1630],{"class":111},"VmodelTest",[77,1632,342],{"class":87},[77,1634,1635,1637,1639],{"class":79,"line":431},[77,1636,1435],{"class":83},[77,1638,1390],{"class":87},[77,1640,342],{"class":83},[77,1642,1643,1645,1647],{"class":79,"line":437},[77,1644,445],{"class":83},[77,1646,463],{"class":87},[77,1648,342],{"class":83},[10,1650,1651,1652,1655,1656,1658],{},"これまでの子コンポーネントと親コンポーネントの書き方と違うのは",[56,1653,1654],{},"v-model","で変数を渡していること、",[56,1657,1422],{},"を書き換えるための関数がないことです。",[10,1660,1661],{},"次に子側です。いくつかコメントをつけてます",[68,1663,1665],{"className":70,"code":1664,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\n\ninterface Props {\n    \u002F\u002Fv-modelのデフォルトの変数名\n    modelValue: string\n}\nconst props = defineProps\u003CProps>()\nconst emits = defineEmits\u003C{\n    \u002F\u002Fupdate:をつける\n    (e: 'update:modelValue', val: string): void\n}>()\n\nconst changeFn = (event: Event) => {\n    \u002F\u002FTypeScriptで書く場合はキャストしないとvalueにアクセスできない\n    const element = event.target as HTMLInputElement\n    emits('update:modelValue', element.value)\n}\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cinput :value=\"props.modelValue\" @input=\"changeFn\">\n\u003C\u002Ftemplate>\n",[56,1666,1667,1679,1683,1691,1696,1705,1709,1725,1737,1742,1767,1771,1775,1800,1805,1824,1836,1840,1844,1852,1856,1864,1889],{"__ignoreMap":73},[77,1668,1669,1671,1673,1675,1677],{"class":79,"line":80},[77,1670,330],{"class":83},[77,1672,333],{"class":87},[77,1674,336],{"class":83},[77,1676,339],{"class":94},[77,1678,342],{"class":83},[77,1680,1681],{"class":79,"line":98},[77,1682,128],{"emptyLinePlaceholder":127},[77,1684,1685,1687,1689],{"class":79,"line":124},[77,1686,312],{"class":83},[77,1688,359],{"class":111},[77,1690,362],{"class":87},[77,1692,1693],{"class":79,"line":131},[77,1694,1695],{"class":351},"    \u002F\u002Fv-modelのデフォルトの変数名\n",[77,1697,1698,1701,1703],{"class":79,"line":153},[77,1699,1700],{"class":246},"    modelValue",[77,1702,370],{"class":83},[77,1704,592],{"class":104},[77,1706,1707],{"class":79,"line":168},[77,1708,378],{"class":87},[77,1710,1711,1713,1715,1717,1719,1721,1723],{"class":79,"line":381},[77,1712,101],{"class":83},[77,1714,386],{"class":104},[77,1716,108],{"class":83},[77,1718,391],{"class":111},[77,1720,330],{"class":87},[77,1722,396],{"class":111},[77,1724,399],{"class":87},[77,1726,1727,1729,1731,1733,1735],{"class":79,"line":402},[77,1728,101],{"class":83},[77,1730,1093],{"class":104},[77,1732,108],{"class":83},[77,1734,847],{"class":111},[77,1736,884],{"class":87},[77,1738,1739],{"class":79,"line":408},[77,1740,1741],{"class":351},"    \u002F\u002Fupdate:をつける\n",[77,1743,1744,1746,1748,1750,1753,1755,1757,1759,1761,1763,1765],{"class":79,"line":413},[77,1745,1104],{"class":87},[77,1747,892],{"class":246},[77,1749,370],{"class":83},[77,1751,1752],{"class":94}," 'update:modelValue'",[77,1754,856],{"class":87},[77,1756,247],{"class":246},[77,1758,370],{"class":83},[77,1760,936],{"class":104},[77,1762,910],{"class":87},[77,1764,370],{"class":83},[77,1766,915],{"class":104},[77,1768,1769],{"class":79,"line":419},[77,1770,947],{"class":87},[77,1772,1773],{"class":79,"line":425},[77,1774,128],{"emptyLinePlaceholder":127},[77,1776,1777,1779,1782,1784,1786,1789,1791,1794,1796,1798],{"class":79,"line":431},[77,1778,101],{"class":83},[77,1780,1781],{"class":111}," changeFn",[77,1783,108],{"class":83},[77,1785,1332],{"class":87},[77,1787,1788],{"class":246},"event",[77,1790,370],{"class":83},[77,1792,1793],{"class":111}," Event",[77,1795,250],{"class":87},[77,1797,147],{"class":83},[77,1799,362],{"class":87},[77,1801,1802],{"class":79,"line":437},[77,1803,1804],{"class":351},"    \u002F\u002FTypeScriptで書く場合はキャストしないとvalueにアクセスできない\n",[77,1806,1807,1810,1813,1815,1818,1821],{"class":79,"line":442},[77,1808,1809],{"class":83},"    const",[77,1811,1812],{"class":104}," element",[77,1814,108],{"class":83},[77,1816,1817],{"class":87}," event.target ",[77,1819,1820],{"class":83},"as",[77,1822,1823],{"class":111}," HTMLInputElement\n",[77,1825,1826,1828,1830,1833],{"class":79,"line":453},[77,1827,1154],{"class":111},[77,1829,115],{"class":87},[77,1831,1832],{"class":94},"'update:modelValue'",[77,1834,1835],{"class":87},", element.value)\n",[77,1837,1838],{"class":79,"line":458},[77,1839,378],{"class":87},[77,1841,1842],{"class":79,"line":468},[77,1843,128],{"emptyLinePlaceholder":127},[77,1845,1846,1848,1850],{"class":79,"line":479},[77,1847,445],{"class":83},[77,1849,448],{"class":87},[77,1851,342],{"class":83},[77,1853,1854],{"class":79,"line":485},[77,1855,128],{"emptyLinePlaceholder":127},[77,1857,1858,1860,1862],{"class":79,"line":495},[77,1859,330],{"class":87},[77,1861,463],{"class":111},[77,1863,342],{"class":87},[77,1865,1866,1868,1871,1874,1876,1879,1882,1884,1887],{"class":79,"line":504},[77,1867,471],{"class":83},[77,1869,1870],{"class":111},"input",[77,1872,1873],{"class":87}," :value",[77,1875,336],{"class":83},[77,1877,1878],{"class":94},"\"props.modelValue\"",[77,1880,1881],{"class":87}," @input",[77,1883,336],{"class":83},[77,1885,1886],{"class":94},"\"changeFn\"",[77,1888,342],{"class":83},[77,1890,1891,1893,1895],{"class":79,"line":510},[77,1892,445],{"class":83},[77,1894,463],{"class":87},[77,1896,342],{"class":83},[10,1898,1899,1900,1903,1904,1907,1908,1029],{},"ポイントは",[56,1901,1902],{},"emits","の",[56,1905,1906],{},"update:","の部分です。このように書くことで、親側で変更用の関数を用意せずとも変数を変更してくれます。\nまた、親側でprops名を指定しない場合、子側のv-modelに対応するprops名は",[56,1909,1910],{},"modelValue",[10,1912,1913],{},"Vue2ではたしかできなかったのですが、Vue3ではv-modelを複数子側に渡せます。以下は親側です。",[68,1915,1917],{"className":70,"code":1916,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport MultiVmodelTest from '.\u002Fcomponents\u002FMultiVmodelTest.vue';\n\nconst name = ref('test')\nconst num = ref(0)\nconst hoge = ref('hoge')\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    {{ name }}\n    {{ num }}\n    {{ hoge }}\n    \u003CMultiVmodelTest v-model=\"name\" v-model:val2=\"num\" v-model:val3=\"hoge\">\u003C\u002FMultiVmodelTest>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,1918,1919,1931,1943,1957,1961,1977,1994,2011,2015,2023,2027,2035,2043,2047,2052,2057,2110,2118],{"__ignoreMap":73},[77,1920,1921,1923,1925,1927,1929],{"class":79,"line":80},[77,1922,330],{"class":83},[77,1924,333],{"class":87},[77,1926,336],{"class":83},[77,1928,339],{"class":94},[77,1930,342],{"class":83},[77,1932,1933,1935,1937,1939,1941],{"class":79,"line":98},[77,1934,84],{"class":83},[77,1936,1262],{"class":87},[77,1938,91],{"class":83},[77,1940,1267],{"class":94},[77,1942,1270],{"class":87},[77,1944,1945,1947,1950,1952,1955],{"class":79,"line":124},[77,1946,84],{"class":83},[77,1948,1949],{"class":87}," MultiVmodelTest ",[77,1951,91],{"class":83},[77,1953,1954],{"class":94}," '.\u002Fcomponents\u002FMultiVmodelTest.vue'",[77,1956,1270],{"class":87},[77,1958,1959],{"class":79,"line":131},[77,1960,128],{"emptyLinePlaceholder":127},[77,1962,1963,1965,1967,1969,1971,1973,1975],{"class":79,"line":153},[77,1964,101],{"class":83},[77,1966,1293],{"class":104},[77,1968,108],{"class":83},[77,1970,112],{"class":111},[77,1972,115],{"class":87},[77,1974,1302],{"class":94},[77,1976,121],{"class":87},[77,1978,1979,1981,1984,1986,1988,1990,1992],{"class":79,"line":168},[77,1980,101],{"class":83},[77,1982,1983],{"class":104}," num",[77,1985,108],{"class":83},[77,1987,112],{"class":111},[77,1989,115],{"class":87},[77,1991,118],{"class":104},[77,1993,121],{"class":87},[77,1995,1996,1998,2000,2002,2004,2006,2009],{"class":79,"line":381},[77,1997,101],{"class":83},[77,1999,136],{"class":104},[77,2001,108],{"class":83},[77,2003,112],{"class":111},[77,2005,115],{"class":87},[77,2007,2008],{"class":94},"'hoge'",[77,2010,121],{"class":87},[77,2012,2013],{"class":79,"line":402},[77,2014,128],{"emptyLinePlaceholder":127},[77,2016,2017,2019,2021],{"class":79,"line":408},[77,2018,445],{"class":83},[77,2020,448],{"class":87},[77,2022,342],{"class":83},[77,2024,2025],{"class":79,"line":413},[77,2026,128],{"emptyLinePlaceholder":127},[77,2028,2029,2031,2033],{"class":79,"line":419},[77,2030,330],{"class":87},[77,2032,463],{"class":111},[77,2034,342],{"class":87},[77,2036,2037,2039,2041],{"class":79,"line":425},[77,2038,1387],{"class":87},[77,2040,1390],{"class":111},[77,2042,342],{"class":87},[77,2044,2045],{"class":79,"line":431},[77,2046,1398],{"class":87},[77,2048,2049],{"class":79,"line":437},[77,2050,2051],{"class":87},"    {{ num }}\n",[77,2053,2054],{"class":79,"line":442},[77,2055,2056],{"class":87},"    {{ hoge }}\n",[77,2058,2059,2061,2064,2066,2068,2070,2072,2075,2077,2079,2082,2084,2087,2089,2091,2093,2096,2098,2101,2103,2105,2108],{"class":79,"line":453},[77,2060,471],{"class":83},[77,2062,2063],{"class":87},"MultiVmodelTest v",[77,2065,1419],{"class":83},[77,2067,1618],{"class":87},[77,2069,336],{"class":83},[77,2071,1623],{"class":94},[77,2073,2074],{"class":87}," v",[77,2076,1419],{"class":83},[77,2078,1618],{"class":111},[77,2080,2081],{"class":87},":val2",[77,2083,336],{"class":83},[77,2085,2086],{"class":94},"\"num\"",[77,2088,2074],{"class":87},[77,2090,1419],{"class":83},[77,2092,1618],{"class":111},[77,2094,2095],{"class":87},":val3",[77,2097,336],{"class":83},[77,2099,2100],{"class":94},"\"hoge\"",[77,2102,1217],{"class":83},[77,2104,445],{"class":87},[77,2106,2107],{"class":111},"MultiVmodelTest",[77,2109,342],{"class":87},[77,2111,2112,2114,2116],{"class":79,"line":458},[77,2113,1435],{"class":83},[77,2115,1390],{"class":87},[77,2117,342],{"class":83},[77,2119,2120,2122,2124],{"class":79,"line":468},[77,2121,445],{"class":83},[77,2123,463],{"class":87},[77,2125,342],{"class":83},[10,2127,2128,2131],{},[56,2129,2130],{},"v-model:\u003C子側のprops名>","とすることで複数渡せます。",[10,2133,2134],{},"子側は以下のようになります。",[68,2136,2138],{"className":70,"code":2137,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\n\ninterface Props {    \n    modelValue: string　\u002F\u002Fv-modelのデフォルトの変数名\n    val2: number\n    val3: string\n}\nconst props = defineProps\u003CProps>()\nconst emits = defineEmits\u003C{    \n    (e: 'update:modelValue', val: string): void\n    (e: 'update:val2', val: number): void\n    (e: 'update:val3', val: string): void\n}>()\n\nconst changeFn1 = (event: Event) => {    \n    const element = event.target as HTMLInputElement\n    emits('update:modelValue', element.value)\n}\n\nconst changeFn2 = (event: Event) => {    \n    const element = event.target as HTMLInputElement\n    emits('update:val2', Number(element.value))\n}\n\nconst changeFn3 = (event: Event) => {    \n    const element = event.target as HTMLInputElement\n    emits('update:val3', element.value)\n}\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cinput :value=\"props.modelValue\" @input=\"changeFn1\">\n        \u003Cinput :value=\"props.val2\" @input=\"changeFn2\">\n        \u003Cinput :value=\"props.val3\" @input=\"changeFn3\">\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,2139,2140,2152,2156,2165,2176,2186,2195,2199,2215,2228,2252,2277,2302,2306,2310,2333,2347,2357,2361,2365,2388,2402,2419,2423,2427,2450,2464,2475,2479,2483,2492,2497,2506,2515,2538,2561,2584,2593],{"__ignoreMap":73},[77,2141,2142,2144,2146,2148,2150],{"class":79,"line":80},[77,2143,330],{"class":83},[77,2145,333],{"class":87},[77,2147,336],{"class":83},[77,2149,339],{"class":94},[77,2151,342],{"class":83},[77,2153,2154],{"class":79,"line":98},[77,2155,128],{"emptyLinePlaceholder":127},[77,2157,2158,2160,2162],{"class":79,"line":124},[77,2159,312],{"class":83},[77,2161,359],{"class":111},[77,2163,2164],{"class":87}," {    \n",[77,2166,2167,2169,2171,2173],{"class":79,"line":131},[77,2168,1700],{"class":246},[77,2170,370],{"class":83},[77,2172,936],{"class":104},[77,2174,2175],{"class":351},"　\u002F\u002Fv-modelのデフォルトの変数名\n",[77,2177,2178,2181,2183],{"class":79,"line":153},[77,2179,2180],{"class":246},"    val2",[77,2182,370],{"class":83},[77,2184,2185],{"class":104}," number\n",[77,2187,2188,2191,2193],{"class":79,"line":168},[77,2189,2190],{"class":246},"    val3",[77,2192,370],{"class":83},[77,2194,592],{"class":104},[77,2196,2197],{"class":79,"line":381},[77,2198,378],{"class":87},[77,2200,2201,2203,2205,2207,2209,2211,2213],{"class":79,"line":402},[77,2202,101],{"class":83},[77,2204,386],{"class":104},[77,2206,108],{"class":83},[77,2208,391],{"class":111},[77,2210,330],{"class":87},[77,2212,396],{"class":111},[77,2214,399],{"class":87},[77,2216,2217,2219,2221,2223,2225],{"class":79,"line":408},[77,2218,101],{"class":83},[77,2220,1093],{"class":104},[77,2222,108],{"class":83},[77,2224,847],{"class":111},[77,2226,2227],{"class":87},"\u003C{    \n",[77,2229,2230,2232,2234,2236,2238,2240,2242,2244,2246,2248,2250],{"class":79,"line":413},[77,2231,1104],{"class":87},[77,2233,892],{"class":246},[77,2235,370],{"class":83},[77,2237,1752],{"class":94},[77,2239,856],{"class":87},[77,2241,247],{"class":246},[77,2243,370],{"class":83},[77,2245,936],{"class":104},[77,2247,910],{"class":87},[77,2249,370],{"class":83},[77,2251,915],{"class":104},[77,2253,2254,2256,2258,2260,2263,2265,2267,2269,2271,2273,2275],{"class":79,"line":419},[77,2255,1104],{"class":87},[77,2257,892],{"class":246},[77,2259,370],{"class":83},[77,2261,2262],{"class":94}," 'update:val2'",[77,2264,856],{"class":87},[77,2266,247],{"class":246},[77,2268,370],{"class":83},[77,2270,907],{"class":104},[77,2272,910],{"class":87},[77,2274,370],{"class":83},[77,2276,915],{"class":104},[77,2278,2279,2281,2283,2285,2288,2290,2292,2294,2296,2298,2300],{"class":79,"line":425},[77,2280,1104],{"class":87},[77,2282,892],{"class":246},[77,2284,370],{"class":83},[77,2286,2287],{"class":94}," 'update:val3'",[77,2289,856],{"class":87},[77,2291,247],{"class":246},[77,2293,370],{"class":83},[77,2295,936],{"class":104},[77,2297,910],{"class":87},[77,2299,370],{"class":83},[77,2301,915],{"class":104},[77,2303,2304],{"class":79,"line":431},[77,2305,947],{"class":87},[77,2307,2308],{"class":79,"line":437},[77,2309,128],{"emptyLinePlaceholder":127},[77,2311,2312,2314,2317,2319,2321,2323,2325,2327,2329,2331],{"class":79,"line":442},[77,2313,101],{"class":83},[77,2315,2316],{"class":111}," changeFn1",[77,2318,108],{"class":83},[77,2320,1332],{"class":87},[77,2322,1788],{"class":246},[77,2324,370],{"class":83},[77,2326,1793],{"class":111},[77,2328,250],{"class":87},[77,2330,147],{"class":83},[77,2332,2164],{"class":87},[77,2334,2335,2337,2339,2341,2343,2345],{"class":79,"line":453},[77,2336,1809],{"class":83},[77,2338,1812],{"class":104},[77,2340,108],{"class":83},[77,2342,1817],{"class":87},[77,2344,1820],{"class":83},[77,2346,1823],{"class":111},[77,2348,2349,2351,2353,2355],{"class":79,"line":458},[77,2350,1154],{"class":111},[77,2352,115],{"class":87},[77,2354,1832],{"class":94},[77,2356,1835],{"class":87},[77,2358,2359],{"class":79,"line":468},[77,2360,378],{"class":87},[77,2362,2363],{"class":79,"line":479},[77,2364,128],{"emptyLinePlaceholder":127},[77,2366,2367,2369,2372,2374,2376,2378,2380,2382,2384,2386],{"class":79,"line":485},[77,2368,101],{"class":83},[77,2370,2371],{"class":111}," changeFn2",[77,2373,108],{"class":83},[77,2375,1332],{"class":87},[77,2377,1788],{"class":246},[77,2379,370],{"class":83},[77,2381,1793],{"class":111},[77,2383,250],{"class":87},[77,2385,147],{"class":83},[77,2387,2164],{"class":87},[77,2389,2390,2392,2394,2396,2398,2400],{"class":79,"line":495},[77,2391,1809],{"class":83},[77,2393,1812],{"class":104},[77,2395,108],{"class":83},[77,2397,1817],{"class":87},[77,2399,1820],{"class":83},[77,2401,1823],{"class":111},[77,2403,2404,2406,2408,2411,2413,2416],{"class":79,"line":504},[77,2405,1154],{"class":111},[77,2407,115],{"class":87},[77,2409,2410],{"class":94},"'update:val2'",[77,2412,856],{"class":87},[77,2414,2415],{"class":111},"Number",[77,2417,2418],{"class":87},"(element.value))\n",[77,2420,2421],{"class":79,"line":510},[77,2422,378],{"class":87},[77,2424,2425],{"class":79,"line":519},[77,2426,128],{"emptyLinePlaceholder":127},[77,2428,2429,2431,2434,2436,2438,2440,2442,2444,2446,2448],{"class":79,"line":712},[77,2430,101],{"class":83},[77,2432,2433],{"class":111}," changeFn3",[77,2435,108],{"class":83},[77,2437,1332],{"class":87},[77,2439,1788],{"class":246},[77,2441,370],{"class":83},[77,2443,1793],{"class":111},[77,2445,250],{"class":87},[77,2447,147],{"class":83},[77,2449,2164],{"class":87},[77,2451,2452,2454,2456,2458,2460,2462],{"class":79,"line":721},[77,2453,1809],{"class":83},[77,2455,1812],{"class":104},[77,2457,108],{"class":83},[77,2459,1817],{"class":87},[77,2461,1820],{"class":83},[77,2463,1823],{"class":111},[77,2465,2466,2468,2470,2473],{"class":79,"line":730},[77,2467,1154],{"class":111},[77,2469,115],{"class":87},[77,2471,2472],{"class":94},"'update:val3'",[77,2474,1835],{"class":87},[77,2476,2477],{"class":79,"line":735},[77,2478,378],{"class":87},[77,2480,2481],{"class":79,"line":744},[77,2482,128],{"emptyLinePlaceholder":127},[77,2484,2486,2488,2490],{"class":79,"line":2485},30,[77,2487,445],{"class":83},[77,2489,448],{"class":87},[77,2491,342],{"class":83},[77,2493,2495],{"class":79,"line":2494},31,[77,2496,128],{"emptyLinePlaceholder":127},[77,2498,2500,2502,2504],{"class":79,"line":2499},32,[77,2501,330],{"class":87},[77,2503,463],{"class":111},[77,2505,342],{"class":87},[77,2507,2509,2511,2513],{"class":79,"line":2508},33,[77,2510,471],{"class":87},[77,2512,474],{"class":111},[77,2514,342],{"class":87},[77,2516,2518,2521,2523,2525,2527,2529,2531,2533,2536],{"class":79,"line":2517},34,[77,2519,2520],{"class":83},"        \u003C",[77,2522,1870],{"class":111},[77,2524,1873],{"class":87},[77,2526,336],{"class":83},[77,2528,1878],{"class":94},[77,2530,1881],{"class":87},[77,2532,336],{"class":83},[77,2534,2535],{"class":94},"\"changeFn1\"",[77,2537,342],{"class":83},[77,2539,2541,2543,2545,2547,2549,2552,2554,2556,2559],{"class":79,"line":2540},35,[77,2542,2520],{"class":83},[77,2544,1870],{"class":111},[77,2546,1873],{"class":87},[77,2548,336],{"class":83},[77,2550,2551],{"class":94},"\"props.val2\"",[77,2553,1881],{"class":87},[77,2555,336],{"class":83},[77,2557,2558],{"class":94},"\"changeFn2\"",[77,2560,342],{"class":83},[77,2562,2564,2566,2568,2570,2572,2575,2577,2579,2582],{"class":79,"line":2563},36,[77,2565,2520],{"class":83},[77,2567,1870],{"class":111},[77,2569,1873],{"class":87},[77,2571,336],{"class":83},[77,2573,2574],{"class":94},"\"props.val3\"",[77,2576,1881],{"class":87},[77,2578,336],{"class":83},[77,2580,2581],{"class":94},"\"changeFn3\"",[77,2583,342],{"class":83},[77,2585,2587,2589,2591],{"class":79,"line":2586},37,[77,2588,488],{"class":83},[77,2590,474],{"class":87},[77,2592,342],{"class":83},[77,2594,2596,2598,2600],{"class":79,"line":2595},38,[77,2597,445],{"class":83},[77,2599,463],{"class":87},[77,2601,342],{"class":83},[10,2603,762,2604],{},[26,2605,2608],{"href":2606,"rel":2607},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fv-model.html",[771],"コンポーネントの v-model",[43,2610,2611],{"id":2611},"slotの使い方",[10,2613,2614,2615,2618,2619,2622],{},"次に",[56,2616,2617],{},"slot","の使い方です。こちらもよく他人のコードを見ていて",[56,2620,2621],{},"\u003Cslot>","というのが出てきた時にパッとどうなるのかわからなくなるのでまとめます。",[10,2624,2625],{},"まずスロット自体は親子間のコンポーネントのやり取りの手段の一つです。propsとの違いはHTMLのタグごと渡せることです。したがってpropsより柔軟な設計が可能となります。",[10,2627,2628],{},"書き方は以下のようになります。まずは親側です。",[68,2630,2632],{"className":70,"code":2631,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport SlotTest from '.\u002Fcomponents\u002FSlotTest.vue'\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CSlotTest>\n      \u003Cspan>Hello\u003C\u002Fspan>\n    \u003C\u002FSlotTest>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,2633,2634,2646,2658,2662,2670,2674,2682,2690,2699,2715,2723,2731],{"__ignoreMap":73},[77,2635,2636,2638,2640,2642,2644],{"class":79,"line":80},[77,2637,330],{"class":83},[77,2639,333],{"class":87},[77,2641,336],{"class":83},[77,2643,339],{"class":94},[77,2645,342],{"class":83},[77,2647,2648,2650,2653,2655],{"class":79,"line":98},[77,2649,84],{"class":83},[77,2651,2652],{"class":87}," SlotTest ",[77,2654,91],{"class":83},[77,2656,2657],{"class":94}," '.\u002Fcomponents\u002FSlotTest.vue'\n",[77,2659,2660],{"class":79,"line":124},[77,2661,128],{"emptyLinePlaceholder":127},[77,2663,2664,2666,2668],{"class":79,"line":131},[77,2665,445],{"class":83},[77,2667,448],{"class":87},[77,2669,342],{"class":83},[77,2671,2672],{"class":79,"line":153},[77,2673,128],{"emptyLinePlaceholder":127},[77,2675,2676,2678,2680],{"class":79,"line":168},[77,2677,330],{"class":87},[77,2679,463],{"class":111},[77,2681,342],{"class":87},[77,2683,2684,2686,2688],{"class":79,"line":381},[77,2685,1387],{"class":87},[77,2687,1390],{"class":111},[77,2689,342],{"class":87},[77,2691,2692,2694,2697],{"class":79,"line":402},[77,2693,471],{"class":87},[77,2695,2696],{"class":111},"SlotTest",[77,2698,342],{"class":87},[77,2700,2701,2704,2706,2709,2711,2713],{"class":79,"line":408},[77,2702,2703],{"class":87},"      \u003C",[77,2705,77],{"class":111},[77,2707,2708],{"class":87},">Hello",[77,2710,445],{"class":83},[77,2712,77],{"class":87},[77,2714,342],{"class":83},[77,2716,2717,2719,2721],{"class":79,"line":413},[77,2718,488],{"class":83},[77,2720,2696],{"class":87},[77,2722,342],{"class":83},[77,2724,2725,2727,2729],{"class":79,"line":419},[77,2726,1435],{"class":83},[77,2728,1390],{"class":87},[77,2730,342],{"class":83},[77,2732,2733,2735,2737],{"class":79,"line":425},[77,2734,445],{"class":83},[77,2736,463],{"class":87},[77,2738,342],{"class":83},[10,2740,2741],{},"親側では子コンポーネントタグの間に挿入したいHTML要素を書きます。",[10,2743,2744],{},"続いて子側です。",[68,2746,2748],{"className":70,"code":2747,"language":72,"meta":73,"style":73},"\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cslot>\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,2749,2750,2758,2766,2779,2787],{"__ignoreMap":73},[77,2751,2752,2754,2756],{"class":79,"line":80},[77,2753,330],{"class":87},[77,2755,463],{"class":111},[77,2757,342],{"class":87},[77,2759,2760,2762,2764],{"class":79,"line":98},[77,2761,471],{"class":87},[77,2763,474],{"class":111},[77,2765,342],{"class":87},[77,2767,2768,2770,2772,2775,2777],{"class":79,"line":124},[77,2769,2520],{"class":87},[77,2771,2617],{"class":111},[77,2773,2774],{"class":87},">\u003C\u002F",[77,2776,2617],{"class":111},[77,2778,342],{"class":87},[77,2780,2781,2783,2785],{"class":79,"line":131},[77,2782,488],{"class":83},[77,2784,474],{"class":87},[77,2786,342],{"class":83},[77,2788,2789,2791,2793],{"class":79,"line":153},[77,2790,445],{"class":83},[77,2792,463],{"class":87},[77,2794,342],{"class":83},[10,2796,2797],{},"単純なパターンだとこれだけです。",[10,2799,2800,2801,2804],{},"子側で定義した",[56,2802,2803],{},"\u003Cslot>\u003C\u002Fslot>","に親側で書いた子側のコンポーネントタグで挟んだ要素が挿入されます。",[10,2806,762,2807],{},[26,2808,2811],{"href":2809,"rel":2810},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fslots.html",[771],"スロット",[295,2813,2814],{"id":2814},"名前付きスロット",[10,2816,2817],{},"あとよくわからなくなるものとして、名前付きスロットというのもあります。用途としては子側で複数箇所に挿入したい場合に使います。",[10,2819,2628],{},[68,2821,2823],{"className":70,"code":2822,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport NamedSlots from '.\u002Fcomponents\u002FNamedSlots.vue'\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CNamedSlots>\n      \u003Ctemplate v-slot:hello>\n        \u003Cp>Hello!\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n      \u003C!-- 簡易的にv-slot:hogeを#hogeともかける -->\n      \u003Ctemplate #hoge>\n        \u003Cp>Hoge!\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #fuga>\n        \u003Cp>Fuga!\u003C\u002Fp>\n      \u003C\u002Ftemplate>\n    \u003C\u002FNamedSlots>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,2824,2825,2837,2849,2853,2861,2865,2873,2881,2890,2906,2921,2930,2948,2957,2972,2980,2989,3004,3012,3020,3028],{"__ignoreMap":73},[77,2826,2827,2829,2831,2833,2835],{"class":79,"line":80},[77,2828,330],{"class":83},[77,2830,333],{"class":87},[77,2832,336],{"class":83},[77,2834,339],{"class":94},[77,2836,342],{"class":83},[77,2838,2839,2841,2844,2846],{"class":79,"line":98},[77,2840,84],{"class":83},[77,2842,2843],{"class":87}," NamedSlots ",[77,2845,91],{"class":83},[77,2847,2848],{"class":94}," '.\u002Fcomponents\u002FNamedSlots.vue'\n",[77,2850,2851],{"class":79,"line":124},[77,2852,128],{"emptyLinePlaceholder":127},[77,2854,2855,2857,2859],{"class":79,"line":131},[77,2856,445],{"class":83},[77,2858,448],{"class":87},[77,2860,342],{"class":83},[77,2862,2863],{"class":79,"line":153},[77,2864,128],{"emptyLinePlaceholder":127},[77,2866,2867,2869,2871],{"class":79,"line":168},[77,2868,330],{"class":87},[77,2870,463],{"class":111},[77,2872,342],{"class":87},[77,2874,2875,2877,2879],{"class":79,"line":381},[77,2876,1387],{"class":87},[77,2878,1390],{"class":111},[77,2880,342],{"class":87},[77,2882,2883,2885,2888],{"class":79,"line":402},[77,2884,471],{"class":87},[77,2886,2887],{"class":111},"NamedSlots",[77,2889,342],{"class":87},[77,2891,2892,2894,2897,2899,2901,2904],{"class":79,"line":408},[77,2893,2703],{"class":83},[77,2895,2896],{"class":87},"template v",[77,2898,1419],{"class":83},[77,2900,2617],{"class":111},[77,2902,2903],{"class":87},":hello",[77,2905,342],{"class":83},[77,2907,2908,2910,2912,2914,2917,2919],{"class":79,"line":413},[77,2909,2520],{"class":87},[77,2911,10],{"class":111},[77,2913,2708],{"class":87},[77,2915,2916],{"class":83},"!\u003C\u002F",[77,2918,10],{"class":87},[77,2920,342],{"class":83},[77,2922,2923,2926,2928],{"class":79,"line":419},[77,2924,2925],{"class":83},"      \u003C\u002F",[77,2927,463],{"class":87},[77,2929,342],{"class":83},[77,2931,2932,2935,2938,2940,2942,2945],{"class":79,"line":425},[77,2933,2934],{"class":83},"      \u003C!--",[77,2936,2937],{"class":87}," 簡易的にv",[77,2939,1419],{"class":83},[77,2941,2617],{"class":111},[77,2943,2944],{"class":87},":hogeを#hogeともかける ",[77,2946,2947],{"class":83},"-->\n",[77,2949,2950,2952,2955],{"class":79,"line":431},[77,2951,2703],{"class":83},[77,2953,2954],{"class":87},"template #hoge",[77,2956,342],{"class":83},[77,2958,2959,2961,2963,2966,2968,2970],{"class":79,"line":437},[77,2960,2520],{"class":87},[77,2962,10],{"class":111},[77,2964,2965],{"class":87},">Hoge",[77,2967,2916],{"class":83},[77,2969,10],{"class":87},[77,2971,342],{"class":83},[77,2973,2974,2976,2978],{"class":79,"line":442},[77,2975,2925],{"class":83},[77,2977,463],{"class":87},[77,2979,342],{"class":83},[77,2981,2982,2984,2987],{"class":79,"line":453},[77,2983,2703],{"class":83},[77,2985,2986],{"class":87},"template #fuga",[77,2988,342],{"class":83},[77,2990,2991,2993,2995,2998,3000,3002],{"class":79,"line":458},[77,2992,2520],{"class":87},[77,2994,10],{"class":111},[77,2996,2997],{"class":87},">Fuga",[77,2999,2916],{"class":83},[77,3001,10],{"class":87},[77,3003,342],{"class":83},[77,3005,3006,3008,3010],{"class":79,"line":468},[77,3007,2925],{"class":83},[77,3009,463],{"class":87},[77,3011,342],{"class":83},[77,3013,3014,3016,3018],{"class":79,"line":479},[77,3015,488],{"class":83},[77,3017,2887],{"class":87},[77,3019,342],{"class":83},[77,3021,3022,3024,3026],{"class":79,"line":485},[77,3023,1435],{"class":83},[77,3025,1390],{"class":87},[77,3027,342],{"class":83},[77,3029,3030,3032,3034],{"class":79,"line":495},[77,3031,445],{"class":83},[77,3033,463],{"class":87},[77,3035,342],{"class":83},[10,3037,3038,3039,3042,3043,3046,3047,3050],{},"子コンポーネントの間いに複数の",[56,3040,3041],{},"\u003Ctemplate>","があります。そこに",[56,3044,3045],{},"v-slot","で子側で定義した名前を指定します。簡易表記で",[56,3048,3049],{},"#名前","とすることもできます。",[10,3052,3053],{},"次は子側です。",[68,3055,3057],{"className":70,"code":3056,"language":72,"meta":73,"style":73},"\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cslot name=\"hello\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cslot name=\"hoge\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cslot name=\"fuga\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,3058,3059,3067,3075,3095,3103,3111,3129,3137,3145,3164,3172],{"__ignoreMap":73},[77,3060,3061,3063,3065],{"class":79,"line":80},[77,3062,330],{"class":87},[77,3064,463],{"class":111},[77,3066,342],{"class":87},[77,3068,3069,3071,3073],{"class":79,"line":98},[77,3070,471],{"class":87},[77,3072,474],{"class":111},[77,3074,342],{"class":87},[77,3076,3077,3079,3082,3084,3087,3089,3091,3093],{"class":79,"line":124},[77,3078,2520],{"class":83},[77,3080,3081],{"class":87},"slot name",[77,3083,336],{"class":83},[77,3085,3086],{"class":94},"\"hello\"",[77,3088,1217],{"class":83},[77,3090,445],{"class":87},[77,3092,2617],{"class":111},[77,3094,342],{"class":87},[77,3096,3097,3099,3101],{"class":79,"line":131},[77,3098,488],{"class":83},[77,3100,474],{"class":87},[77,3102,342],{"class":83},[77,3104,3105,3107,3109],{"class":79,"line":153},[77,3106,471],{"class":87},[77,3108,474],{"class":111},[77,3110,342],{"class":87},[77,3112,3113,3115,3117,3119,3121,3123,3125,3127],{"class":79,"line":168},[77,3114,2520],{"class":83},[77,3116,3081],{"class":87},[77,3118,336],{"class":83},[77,3120,2100],{"class":94},[77,3122,1217],{"class":83},[77,3124,445],{"class":87},[77,3126,2617],{"class":111},[77,3128,342],{"class":87},[77,3130,3131,3133,3135],{"class":79,"line":381},[77,3132,488],{"class":83},[77,3134,474],{"class":87},[77,3136,342],{"class":83},[77,3138,3139,3141,3143],{"class":79,"line":402},[77,3140,471],{"class":87},[77,3142,474],{"class":111},[77,3144,342],{"class":87},[77,3146,3147,3149,3151,3153,3156,3158,3160,3162],{"class":79,"line":408},[77,3148,2520],{"class":83},[77,3150,3081],{"class":87},[77,3152,336],{"class":83},[77,3154,3155],{"class":94},"\"fuga\"",[77,3157,1217],{"class":83},[77,3159,445],{"class":87},[77,3161,2617],{"class":111},[77,3163,342],{"class":87},[77,3165,3166,3168,3170],{"class":79,"line":413},[77,3167,488],{"class":83},[77,3169,474],{"class":87},[77,3171,342],{"class":83},[77,3173,3174,3176,3178],{"class":79,"line":419},[77,3175,445],{"class":83},[77,3177,463],{"class":87},[77,3179,342],{"class":83},[10,3181,3182,3183,3185],{},"子側のslotにname属性をつけて、親側の",[56,3184,3041],{},"でv-slotを使って参照します。そうすると子側の名前に対応する場所に親側で指定した要素が入ります。",[295,3187,3188],{"id":3188},"スコープ付きスロット",[10,3190,3191],{},"さらにややこしいのがスコープ付きスロットです。これは子側の変数を親側で参照できる仕組みです。",[10,3193,3194],{},"まずは子側です。",[68,3196,3198],{"className":70,"code":3197,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst childName = ref('子側の変数')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cslot :child-name=\"childName\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,3199,3200,3212,3222,3226,3244,3252,3256,3264,3272,3298,3306],{"__ignoreMap":73},[77,3201,3202,3204,3206,3208,3210],{"class":79,"line":80},[77,3203,330],{"class":83},[77,3205,333],{"class":87},[77,3207,336],{"class":83},[77,3209,339],{"class":94},[77,3211,342],{"class":83},[77,3213,3214,3216,3218,3220],{"class":79,"line":98},[77,3215,84],{"class":83},[77,3217,1262],{"class":87},[77,3219,91],{"class":83},[77,3221,95],{"class":94},[77,3223,3224],{"class":79,"line":124},[77,3225,128],{"emptyLinePlaceholder":127},[77,3227,3228,3230,3233,3235,3237,3239,3242],{"class":79,"line":131},[77,3229,101],{"class":83},[77,3231,3232],{"class":104}," childName",[77,3234,108],{"class":83},[77,3236,112],{"class":111},[77,3238,115],{"class":87},[77,3240,3241],{"class":94},"'子側の変数'",[77,3243,121],{"class":87},[77,3245,3246,3248,3250],{"class":79,"line":153},[77,3247,445],{"class":83},[77,3249,448],{"class":87},[77,3251,342],{"class":83},[77,3253,3254],{"class":79,"line":168},[77,3255,128],{"emptyLinePlaceholder":127},[77,3257,3258,3260,3262],{"class":79,"line":381},[77,3259,330],{"class":87},[77,3261,463],{"class":111},[77,3263,342],{"class":87},[77,3265,3266,3268,3270],{"class":79,"line":402},[77,3267,471],{"class":87},[77,3269,474],{"class":111},[77,3271,342],{"class":87},[77,3273,3274,3276,3278,3281,3283,3285,3287,3290,3292,3294,3296],{"class":79,"line":408},[77,3275,2520],{"class":83},[77,3277,2617],{"class":111},[77,3279,3280],{"class":87}," :child",[77,3282,1419],{"class":83},[77,3284,1422],{"class":87},[77,3286,336],{"class":83},[77,3288,3289],{"class":94},"\"childName\"",[77,3291,1217],{"class":83},[77,3293,445],{"class":87},[77,3295,2617],{"class":111},[77,3297,342],{"class":87},[77,3299,3300,3302,3304],{"class":79,"line":413},[77,3301,488],{"class":83},[77,3303,474],{"class":87},[77,3305,342],{"class":83},[77,3307,3308,3310,3312],{"class":79,"line":419},[77,3309,445],{"class":83},[77,3311,463],{"class":87},[77,3313,342],{"class":83},[10,3315,3316,3317,3319,3320,3323],{},"変数を定義して、",[56,3318,2621],{},"に",[56,3321,3322],{},"v-bind","の形式で渡してあげます。",[10,3325,3326],{},"続いて親側です。",[68,3328,3330],{"className":70,"code":3329,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport ScopedSlot from '.\u002Fcomponents\u002FScopedSlot.vue'\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CScopedSlot v-slot=\"slotProps\">\n      {{ slotProps.childName }}\n    \u003C\u002FScopedSlot>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,3331,3332,3344,3356,3360,3368,3372,3380,3388,3406,3411,3420,3428],{"__ignoreMap":73},[77,3333,3334,3336,3338,3340,3342],{"class":79,"line":80},[77,3335,330],{"class":83},[77,3337,333],{"class":87},[77,3339,336],{"class":83},[77,3341,339],{"class":94},[77,3343,342],{"class":83},[77,3345,3346,3348,3351,3353],{"class":79,"line":98},[77,3347,84],{"class":83},[77,3349,3350],{"class":87}," ScopedSlot ",[77,3352,91],{"class":83},[77,3354,3355],{"class":94}," '.\u002Fcomponents\u002FScopedSlot.vue'\n",[77,3357,3358],{"class":79,"line":124},[77,3359,128],{"emptyLinePlaceholder":127},[77,3361,3362,3364,3366],{"class":79,"line":131},[77,3363,445],{"class":83},[77,3365,448],{"class":87},[77,3367,342],{"class":83},[77,3369,3370],{"class":79,"line":153},[77,3371,128],{"emptyLinePlaceholder":127},[77,3373,3374,3376,3378],{"class":79,"line":168},[77,3375,330],{"class":87},[77,3377,463],{"class":111},[77,3379,342],{"class":87},[77,3381,3382,3384,3386],{"class":79,"line":381},[77,3383,1387],{"class":87},[77,3385,1390],{"class":111},[77,3387,342],{"class":87},[77,3389,3390,3392,3395,3397,3399,3401,3404],{"class":79,"line":402},[77,3391,471],{"class":83},[77,3393,3394],{"class":87},"ScopedSlot v",[77,3396,1419],{"class":83},[77,3398,2617],{"class":87},[77,3400,336],{"class":83},[77,3402,3403],{"class":94},"\"slotProps\"",[77,3405,342],{"class":83},[77,3407,3408],{"class":79,"line":408},[77,3409,3410],{"class":87},"      {{ slotProps.childName }}\n",[77,3412,3413,3415,3418],{"class":79,"line":413},[77,3414,488],{"class":83},[77,3416,3417],{"class":87},"ScopedSlot",[77,3419,342],{"class":83},[77,3421,3422,3424,3426],{"class":79,"line":419},[77,3423,1435],{"class":83},[77,3425,1390],{"class":87},[77,3427,342],{"class":83},[77,3429,3430,3432,3434],{"class":79,"line":425},[77,3431,445],{"class":83},[77,3433,463],{"class":87},[77,3435,342],{"class":83},[10,3437,3438,3439,3442,3443,3446],{},"これまでとの違いは子コンポーネント自体に",[56,3440,3441],{},"v-slot=","があることです（厳密には",[56,3444,3445],{},"v-slot:default","）。",[10,3448,3449,3450,3453,3454,3456],{},"ここでは",[56,3451,3452],{},"slotProps","としていますが、この値はなんでも良いです。コードにあるようにこの",[56,3455,3452],{},"経由で子側の変数にアクセスできます。",[10,3458,3459],{},"JavaScriptの分割代入を使うと子側で定義した変数がそのまま扱えるので便利です。これを使うと先ほどの親側のコードは以下のようになります。",[68,3461,3463],{"className":70,"code":3462,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport ScopedSlot from '.\u002Fcomponents\u002FScopedSlot.vue'\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CScopedSlot v-slot=\"{ childName }\">\n      {{ childName }}\n    \u003C\u002FScopedSlot>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,3464,3465,3477,3487,3491,3499,3503,3511,3519,3536,3541,3549,3557],{"__ignoreMap":73},[77,3466,3467,3469,3471,3473,3475],{"class":79,"line":80},[77,3468,330],{"class":83},[77,3470,333],{"class":87},[77,3472,336],{"class":83},[77,3474,339],{"class":94},[77,3476,342],{"class":83},[77,3478,3479,3481,3483,3485],{"class":79,"line":98},[77,3480,84],{"class":83},[77,3482,3350],{"class":87},[77,3484,91],{"class":83},[77,3486,3355],{"class":94},[77,3488,3489],{"class":79,"line":124},[77,3490,128],{"emptyLinePlaceholder":127},[77,3492,3493,3495,3497],{"class":79,"line":131},[77,3494,445],{"class":83},[77,3496,448],{"class":87},[77,3498,342],{"class":83},[77,3500,3501],{"class":79,"line":153},[77,3502,128],{"emptyLinePlaceholder":127},[77,3504,3505,3507,3509],{"class":79,"line":168},[77,3506,330],{"class":87},[77,3508,463],{"class":111},[77,3510,342],{"class":87},[77,3512,3513,3515,3517],{"class":79,"line":381},[77,3514,1387],{"class":87},[77,3516,1390],{"class":111},[77,3518,342],{"class":87},[77,3520,3521,3523,3525,3527,3529,3531,3534],{"class":79,"line":402},[77,3522,471],{"class":83},[77,3524,3394],{"class":87},[77,3526,1419],{"class":83},[77,3528,2617],{"class":87},[77,3530,336],{"class":83},[77,3532,3533],{"class":94},"\"{ childName }\"",[77,3535,342],{"class":83},[77,3537,3538],{"class":79,"line":408},[77,3539,3540],{"class":87},"      {{ childName }}\n",[77,3542,3543,3545,3547],{"class":79,"line":413},[77,3544,488],{"class":83},[77,3546,3417],{"class":87},[77,3548,342],{"class":83},[77,3550,3551,3553,3555],{"class":79,"line":419},[77,3552,1435],{"class":83},[77,3554,1390],{"class":87},[77,3556,342],{"class":83},[77,3558,3559,3561,3563],{"class":79,"line":425},[77,3560,445],{"class":83},[77,3562,463],{"class":87},[77,3564,342],{"class":83},[10,3566,3567],{},"さらに名前付きスロットでスロットPropsを使うこともできます。",[10,3569,3570],{},"子側は以下です。",[68,3572,3574],{"className":70,"code":3573,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst hello = ref('hello!')\nconst hoge = ref('hoge!')\nconst fuga = ref('fuga!')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cslot name=\"hello\" :hello=\"hello\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cslot name=\"hoge\" :hoge=\"hoge\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cslot name=\"fuga\" :fuga=\"fuga\">\u003C\u002Fslot>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,3575,3576,3588,3598,3602,3620,3637,3654,3662,3666,3674,3682,3707,3715,3723,3748,3756,3764,3789,3797],{"__ignoreMap":73},[77,3577,3578,3580,3582,3584,3586],{"class":79,"line":80},[77,3579,330],{"class":83},[77,3581,333],{"class":87},[77,3583,336],{"class":83},[77,3585,339],{"class":94},[77,3587,342],{"class":83},[77,3589,3590,3592,3594,3596],{"class":79,"line":98},[77,3591,84],{"class":83},[77,3593,1262],{"class":87},[77,3595,91],{"class":83},[77,3597,95],{"class":94},[77,3599,3600],{"class":79,"line":124},[77,3601,128],{"emptyLinePlaceholder":127},[77,3603,3604,3606,3609,3611,3613,3615,3618],{"class":79,"line":131},[77,3605,101],{"class":83},[77,3607,3608],{"class":104}," hello",[77,3610,108],{"class":83},[77,3612,112],{"class":111},[77,3614,115],{"class":87},[77,3616,3617],{"class":94},"'hello!'",[77,3619,121],{"class":87},[77,3621,3622,3624,3626,3628,3630,3632,3635],{"class":79,"line":153},[77,3623,101],{"class":83},[77,3625,136],{"class":104},[77,3627,108],{"class":83},[77,3629,112],{"class":111},[77,3631,115],{"class":87},[77,3633,3634],{"class":94},"'hoge!'",[77,3636,121],{"class":87},[77,3638,3639,3641,3643,3645,3647,3649,3652],{"class":79,"line":168},[77,3640,101],{"class":83},[77,3642,105],{"class":104},[77,3644,108],{"class":83},[77,3646,112],{"class":111},[77,3648,115],{"class":87},[77,3650,3651],{"class":94},"'fuga!'",[77,3653,121],{"class":87},[77,3655,3656,3658,3660],{"class":79,"line":381},[77,3657,445],{"class":83},[77,3659,448],{"class":87},[77,3661,342],{"class":83},[77,3663,3664],{"class":79,"line":402},[77,3665,128],{"emptyLinePlaceholder":127},[77,3667,3668,3670,3672],{"class":79,"line":408},[77,3669,330],{"class":87},[77,3671,463],{"class":111},[77,3673,342],{"class":87},[77,3675,3676,3678,3680],{"class":79,"line":413},[77,3677,471],{"class":87},[77,3679,474],{"class":111},[77,3681,342],{"class":87},[77,3683,3684,3686,3688,3690,3692,3695,3697,3699,3701,3703,3705],{"class":79,"line":419},[77,3685,2520],{"class":83},[77,3687,3081],{"class":87},[77,3689,336],{"class":83},[77,3691,3086],{"class":94},[77,3693,3694],{"class":87}," :hello",[77,3696,336],{"class":83},[77,3698,3086],{"class":94},[77,3700,1217],{"class":83},[77,3702,445],{"class":87},[77,3704,2617],{"class":111},[77,3706,342],{"class":87},[77,3708,3709,3711,3713],{"class":79,"line":425},[77,3710,488],{"class":83},[77,3712,474],{"class":87},[77,3714,342],{"class":83},[77,3716,3717,3719,3721],{"class":79,"line":431},[77,3718,471],{"class":87},[77,3720,474],{"class":111},[77,3722,342],{"class":87},[77,3724,3725,3727,3729,3731,3733,3736,3738,3740,3742,3744,3746],{"class":79,"line":437},[77,3726,2520],{"class":83},[77,3728,3081],{"class":87},[77,3730,336],{"class":83},[77,3732,2100],{"class":94},[77,3734,3735],{"class":87}," :hoge",[77,3737,336],{"class":83},[77,3739,2100],{"class":94},[77,3741,1217],{"class":83},[77,3743,445],{"class":87},[77,3745,2617],{"class":111},[77,3747,342],{"class":87},[77,3749,3750,3752,3754],{"class":79,"line":442},[77,3751,488],{"class":83},[77,3753,474],{"class":87},[77,3755,342],{"class":83},[77,3757,3758,3760,3762],{"class":79,"line":453},[77,3759,471],{"class":87},[77,3761,474],{"class":111},[77,3763,342],{"class":87},[77,3765,3766,3768,3770,3772,3774,3777,3779,3781,3783,3785,3787],{"class":79,"line":458},[77,3767,2520],{"class":83},[77,3769,3081],{"class":87},[77,3771,336],{"class":83},[77,3773,3155],{"class":94},[77,3775,3776],{"class":87}," :fuga",[77,3778,336],{"class":83},[77,3780,3155],{"class":94},[77,3782,1217],{"class":83},[77,3784,445],{"class":87},[77,3786,2617],{"class":111},[77,3788,342],{"class":87},[77,3790,3791,3793,3795],{"class":79,"line":468},[77,3792,488],{"class":83},[77,3794,474],{"class":87},[77,3796,342],{"class":83},[77,3798,3799,3801,3803],{"class":79,"line":479},[77,3800,445],{"class":83},[77,3802,463],{"class":87},[77,3804,342],{"class":83},[10,3806,3807],{},"親側です。",[68,3809,3811],{"className":70,"code":3810,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport NamedScopedSlot from '.\u002Fcomponents\u002FNamedScopedSlots.vue'\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003CNamedScopedSlot>\n      \u003Ctemplate #hello=\"{ hello }\">\n        {{ hello }}\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #hoge=\"{ hoge }\">\n        {{ hoge }}\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #fuga=\"{ fuga }\">\n        {{ fuga }}\n      \u003C\u002Ftemplate>\n    \u003C\u002FNamedScopedSlot>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,3812,3813,3825,3837,3841,3849,3853,3861,3869,3878,3892,3897,3905,3918,3923,3931,3944,3949,3957,3965,3973],{"__ignoreMap":73},[77,3814,3815,3817,3819,3821,3823],{"class":79,"line":80},[77,3816,330],{"class":83},[77,3818,333],{"class":87},[77,3820,336],{"class":83},[77,3822,339],{"class":94},[77,3824,342],{"class":83},[77,3826,3827,3829,3832,3834],{"class":79,"line":98},[77,3828,84],{"class":83},[77,3830,3831],{"class":87}," NamedScopedSlot ",[77,3833,91],{"class":83},[77,3835,3836],{"class":94}," '.\u002Fcomponents\u002FNamedScopedSlots.vue'\n",[77,3838,3839],{"class":79,"line":124},[77,3840,128],{"emptyLinePlaceholder":127},[77,3842,3843,3845,3847],{"class":79,"line":131},[77,3844,445],{"class":83},[77,3846,448],{"class":87},[77,3848,342],{"class":83},[77,3850,3851],{"class":79,"line":153},[77,3852,128],{"emptyLinePlaceholder":127},[77,3854,3855,3857,3859],{"class":79,"line":168},[77,3856,330],{"class":87},[77,3858,463],{"class":111},[77,3860,342],{"class":87},[77,3862,3863,3865,3867],{"class":79,"line":381},[77,3864,1387],{"class":87},[77,3866,1390],{"class":111},[77,3868,342],{"class":87},[77,3870,3871,3873,3876],{"class":79,"line":402},[77,3872,471],{"class":87},[77,3874,3875],{"class":111},"NamedScopedSlot",[77,3877,342],{"class":87},[77,3879,3880,3882,3885,3887,3890],{"class":79,"line":408},[77,3881,2703],{"class":83},[77,3883,3884],{"class":87},"template #hello",[77,3886,336],{"class":83},[77,3888,3889],{"class":94},"\"{ hello }\"",[77,3891,342],{"class":83},[77,3893,3894],{"class":79,"line":413},[77,3895,3896],{"class":87},"        {{ hello }}\n",[77,3898,3899,3901,3903],{"class":79,"line":419},[77,3900,2925],{"class":83},[77,3902,463],{"class":87},[77,3904,342],{"class":83},[77,3906,3907,3909,3911,3913,3916],{"class":79,"line":425},[77,3908,2703],{"class":83},[77,3910,2954],{"class":87},[77,3912,336],{"class":83},[77,3914,3915],{"class":94},"\"{ hoge }\"",[77,3917,342],{"class":83},[77,3919,3920],{"class":79,"line":431},[77,3921,3922],{"class":87},"        {{ hoge }}\n",[77,3924,3925,3927,3929],{"class":79,"line":437},[77,3926,2925],{"class":83},[77,3928,463],{"class":87},[77,3930,342],{"class":83},[77,3932,3933,3935,3937,3939,3942],{"class":79,"line":442},[77,3934,2703],{"class":83},[77,3936,2986],{"class":87},[77,3938,336],{"class":83},[77,3940,3941],{"class":94},"\"{ fuga }\"",[77,3943,342],{"class":83},[77,3945,3946],{"class":79,"line":453},[77,3947,3948],{"class":87},"        {{ fuga }}\n",[77,3950,3951,3953,3955],{"class":79,"line":458},[77,3952,2925],{"class":83},[77,3954,463],{"class":87},[77,3956,342],{"class":83},[77,3958,3959,3961,3963],{"class":79,"line":468},[77,3960,488],{"class":83},[77,3962,3875],{"class":87},[77,3964,342],{"class":83},[77,3966,3967,3969,3971],{"class":79,"line":479},[77,3968,1435],{"class":83},[77,3970,1390],{"class":87},[77,3972,342],{"class":83},[77,3974,3975,3977,3979],{"class":79,"line":485},[77,3976,445],{"class":83},[77,3978,463],{"class":87},[77,3980,342],{"class":83},[10,3982,3983],{},"こんな感じで多少ややこしくはなりますが、スロットを使うとかなり柔軟に色々できます。",[43,3985,3986],{"id":3986},"コンポーネントの命名規則",[10,3988,3989],{},"いろんなコードを見てるとコンポーネント名やpropsの書き方が微妙に違うことがあって気になったので調べました。",[10,3991,3992],{},"まず以下の用語を押さえます。",[20,3994,3995,4022,4047],{},[23,3996,3997,3998],{},"PascalCase\n",[20,3999,4000,4003],{},[23,4001,4002],{},"各単語の最初の文字を大文字にし、スペースやアンダースコアを使わずに単語を連結する",[23,4004,4005,4006,856,4012,856,4017],{},"例：",[4007,4008,4009],"strong",{},[56,4010,4011],{},"MyFirstClass",[4007,4013,4014],{},[56,4015,4016],{},"CarModel",[4007,4018,4019],{},[56,4020,4021],{},"AnimalType",[23,4023,4024,4025],{},"camelCase\n",[20,4026,4027,4030],{},[23,4028,4029],{},"PascalCaseと似ているが、最初の単語の最初の文字は小文字になる",[23,4031,4005,4032,856,4037,856,4042],{},[4007,4033,4034],{},[56,4035,4036],{},"myFirstVariable",[4007,4038,4039],{},[56,4040,4041],{},"carModel",[4007,4043,4044],{},[56,4045,4046],{},"animalType",[23,4048,4049,4050],{},"kebab-case\n",[20,4051,4052,4055],{},[23,4053,4054],{},"kebab-caseは、単語をハイフン（-）で区切る",[23,4056,4005,4057,856,4062,856,4067],{},[4007,4058,4059],{},[56,4060,4061],{},"my-first-class",[4007,4063,4064],{},[56,4065,4066],{},"car-model",[4007,4068,4069],{},[56,4070,4071],{},"animal-type",[10,4073,4074],{},"Vueのコンポーネント名は基本的にPascalCaseが推奨されています。ただkebab-caseでも問題なく使えるのでそういうパターンも見かけるようです。",[10,4076,762,4077],{},[26,4078,4081],{"href":4079,"rel":4080},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fregistration.html#component-name-casing",[771],"コンポーネント名での大文字・小文字の使い方",[10,4083,4084],{},"次にpropsですが、子コンポーネントでpropsを定義する際はcamelCaseを使います。ただ、親コンポーネントで子コンポーネントを使用する際にpropsを渡すときはkebab-caseの利用が推奨されています。",[10,4086,4087],{},"以下は一例です。",[68,4089,4091],{"className":70,"code":4090,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport NameCase from '.\u002Fcomponents\u002FNameCase.vue'\n\nconst titleName = ref('hoge')\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmain>\n    \u003C!-- コンポーネント名はPascalCase -->\n    \u003C!-- 子コンポーネントにpropsを渡す時はkebab-case -->\n    \u003CNameCase :title-name=\"titleName\">\n    \u003C\u002FNameCase>\n  \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[56,4092,4093,4105,4115,4127,4131,4148,4152,4160,4164,4172,4180,4190,4203,4223,4231,4239],{"__ignoreMap":73},[77,4094,4095,4097,4099,4101,4103],{"class":79,"line":80},[77,4096,330],{"class":83},[77,4098,333],{"class":87},[77,4100,336],{"class":83},[77,4102,339],{"class":94},[77,4104,342],{"class":83},[77,4106,4107,4109,4111,4113],{"class":79,"line":98},[77,4108,84],{"class":83},[77,4110,1262],{"class":87},[77,4112,91],{"class":83},[77,4114,95],{"class":94},[77,4116,4117,4119,4122,4124],{"class":79,"line":124},[77,4118,84],{"class":83},[77,4120,4121],{"class":87}," NameCase ",[77,4123,91],{"class":83},[77,4125,4126],{"class":94}," '.\u002Fcomponents\u002FNameCase.vue'\n",[77,4128,4129],{"class":79,"line":131},[77,4130,128],{"emptyLinePlaceholder":127},[77,4132,4133,4135,4138,4140,4142,4144,4146],{"class":79,"line":153},[77,4134,101],{"class":83},[77,4136,4137],{"class":104}," titleName",[77,4139,108],{"class":83},[77,4141,112],{"class":111},[77,4143,115],{"class":87},[77,4145,2008],{"class":94},[77,4147,121],{"class":87},[77,4149,4150],{"class":79,"line":168},[77,4151,128],{"emptyLinePlaceholder":127},[77,4153,4154,4156,4158],{"class":79,"line":381},[77,4155,445],{"class":83},[77,4157,448],{"class":87},[77,4159,342],{"class":83},[77,4161,4162],{"class":79,"line":402},[77,4163,128],{"emptyLinePlaceholder":127},[77,4165,4166,4168,4170],{"class":79,"line":408},[77,4167,330],{"class":87},[77,4169,463],{"class":111},[77,4171,342],{"class":87},[77,4173,4174,4176,4178],{"class":79,"line":413},[77,4175,1387],{"class":87},[77,4177,1390],{"class":111},[77,4179,342],{"class":87},[77,4181,4182,4185,4188],{"class":79,"line":419},[77,4183,4184],{"class":83},"    \u003C!--",[77,4186,4187],{"class":87}," コンポーネント名はPascalCase ",[77,4189,2947],{"class":83},[77,4191,4192,4194,4197,4200],{"class":79,"line":425},[77,4193,4184],{"class":83},[77,4195,4196],{"class":87}," 子コンポーネントにpropsを渡す時はkebab",[77,4198,4199],{"class":83},"-case",[77,4201,4202],{"class":83}," -->\n",[77,4204,4205,4207,4210,4212,4214,4216,4218,4221],{"class":79,"line":431},[77,4206,471],{"class":83},[77,4208,4209],{"class":111},"NameCase",[77,4211,1408],{"class":87},[77,4213,1419],{"class":83},[77,4215,1422],{"class":87},[77,4217,336],{"class":83},[77,4219,4220],{"class":94},"\"titleName\"",[77,4222,342],{"class":83},[77,4224,4225,4227,4229],{"class":79,"line":437},[77,4226,488],{"class":83},[77,4228,4209],{"class":87},[77,4230,342],{"class":83},[77,4232,4233,4235,4237],{"class":79,"line":442},[77,4234,1435],{"class":83},[77,4236,1390],{"class":87},[77,4238,342],{"class":83},[77,4240,4241,4243,4245],{"class":79,"line":453},[77,4242,445],{"class":83},[77,4244,463],{"class":87},[77,4246,342],{"class":83},[10,4248,762,4249],{},[26,4250,4253],{"href":4251,"rel":4252},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fcomponents\u002Fprops.html#prop-passing-details",[771],"props 名の大文字・小文字の使い分け",[43,4255,4257],{"id":4256},"nuxtlinkとaタグどっちを使うべきか","NuxtLinkとaタグどっちを使うべきか",[10,4259,4260],{},"結論Nuxtを使っているならNuxtLinkを使うでOK。",[10,4262,4263,4264,4269,4270,4273,4274,4277],{},"公式の",[26,4265,4268],{"href":4266,"rel":4267},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link#nuxtlink",[771],"NuxtLink","によると",[56,4271,4272],{},"\u003CNuxtLink>","は",[56,4275,4276],{},"\u003Ca>","タグを置き換え可能で、外部リンクか内部リンクを賢く判断して使い分けられると書かれています。",[10,4279,4280,4281,4283],{},"特に内部リンクに関しては",[56,4282,4272],{},"の方がいいらしいです",[43,4285,4287],{"id":4286},"を使った書き方について","$を使った書き方について",[10,4289,4290],{},"vue自身が持っている組み込みの変数？関数っぽいです。Vue2のドキュメントだとComponent Instanceと呼ばれてますが、Vue3のドキュメントが見当たりません。",[10,4292,4293],{},"一方で、Vue3の他のドキュメントで普通に使われてたりするので混乱しました。",[10,4295,762,4296],{},[26,4297,4300],{"href":4298,"rel":4299},"https:\u002F\u002Fvuejs.org\u002Fapi\u002Fcomponent-instance.html#emit",[771],"Component Instance",[43,4302,4304],{"id":4303},"cssの動的変更方法","CSSの動的変更方法",[10,4306,4307],{},"ある値によって適用するCSSのクラスを変えたい時がよくあります。Vueで動的に変えられることは覚えているのですが、書き方を忘れるのでメモです。",[10,4309,4310,4311,4314,4315,4318],{},"基本は",[56,4312,4313],{},"\u003Cdiv :class=\"{ active: isActive }\">","のようにclassにバインドして",[56,4316,4317],{},"{cssクラス名：フラグ変数}","のように書きます。",[10,4320,4321],{},"よくあるパターンがcssのクラスが2つありフラグがtrueとfalseでクラスを使い分けるパターンです。",[10,4323,4324],{},"この場合は以下のようにオブジェクトにまとめるとわかりやすいです。",[68,4326,4328],{"className":70,"code":4327,"language":72,"meta":73,"style":73},"\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue';\n\nconst isActive = ref(true)\nconst error = ref(false)\n\nconst classObject = computed(() => ({\n    active: isActive.value && !error.value,\n    'text-danger': error.value === true\n}))\n\nconst changeClass = () => {\n    isActive.value = !isActive.value\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv :class=\"classObject\" @click=\"changeClass\">クリックで背景色が変わる\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[56,4329,4330,4342,4355,4359,4377,4395,4399,4418,4432,4446,4451,4455,4470,4482,4486,4494,4498,4506,4539],{"__ignoreMap":73},[77,4331,4332,4334,4336,4338,4340],{"class":79,"line":80},[77,4333,330],{"class":83},[77,4335,333],{"class":87},[77,4337,336],{"class":83},[77,4339,339],{"class":94},[77,4341,342],{"class":83},[77,4343,4344,4346,4349,4351,4353],{"class":79,"line":98},[77,4345,84],{"class":83},[77,4347,4348],{"class":87}," { ref, computed } ",[77,4350,91],{"class":83},[77,4352,1267],{"class":94},[77,4354,1270],{"class":87},[77,4356,4357],{"class":79,"line":124},[77,4358,128],{"emptyLinePlaceholder":127},[77,4360,4361,4363,4366,4368,4370,4372,4375],{"class":79,"line":131},[77,4362,101],{"class":83},[77,4364,4365],{"class":104}," isActive",[77,4367,108],{"class":83},[77,4369,112],{"class":111},[77,4371,115],{"class":87},[77,4373,4374],{"class":104},"true",[77,4376,121],{"class":87},[77,4378,4379,4381,4384,4386,4388,4390,4393],{"class":79,"line":153},[77,4380,101],{"class":83},[77,4382,4383],{"class":104}," error",[77,4385,108],{"class":83},[77,4387,112],{"class":111},[77,4389,115],{"class":87},[77,4391,4392],{"class":104},"false",[77,4394,121],{"class":87},[77,4396,4397],{"class":79,"line":168},[77,4398,128],{"emptyLinePlaceholder":127},[77,4400,4401,4403,4406,4408,4410,4413,4415],{"class":79,"line":381},[77,4402,101],{"class":83},[77,4404,4405],{"class":104}," classObject",[77,4407,108],{"class":83},[77,4409,141],{"class":111},[77,4411,4412],{"class":87},"(() ",[77,4414,147],{"class":83},[77,4416,4417],{"class":87}," ({\n",[77,4419,4420,4423,4426,4429],{"class":79,"line":402},[77,4421,4422],{"class":87},"    active: isActive.value ",[77,4424,4425],{"class":83},"&&",[77,4427,4428],{"class":83}," !",[77,4430,4431],{"class":87},"error.value,\n",[77,4433,4434,4437,4440,4443],{"class":79,"line":408},[77,4435,4436],{"class":94},"    'text-danger'",[77,4438,4439],{"class":87},": error.value ",[77,4441,4442],{"class":83},"===",[77,4444,4445],{"class":104}," true\n",[77,4447,4448],{"class":79,"line":413},[77,4449,4450],{"class":87},"}))\n",[77,4452,4453],{"class":79,"line":419},[77,4454,128],{"emptyLinePlaceholder":127},[77,4456,4457,4459,4462,4464,4466,4468],{"class":79,"line":425},[77,4458,101],{"class":83},[77,4460,4461],{"class":111}," changeClass",[77,4463,108],{"class":83},[77,4465,1145],{"class":87},[77,4467,147],{"class":83},[77,4469,362],{"class":87},[77,4471,4472,4475,4477,4479],{"class":79,"line":431},[77,4473,4474],{"class":87},"    isActive.value ",[77,4476,336],{"class":83},[77,4478,4428],{"class":83},[77,4480,4481],{"class":87},"isActive.value\n",[77,4483,4484],{"class":79,"line":437},[77,4485,378],{"class":87},[77,4487,4488,4490,4492],{"class":79,"line":442},[77,4489,445],{"class":83},[77,4491,448],{"class":87},[77,4493,342],{"class":83},[77,4495,4496],{"class":79,"line":453},[77,4497,128],{"emptyLinePlaceholder":127},[77,4499,4500,4502,4504],{"class":79,"line":458},[77,4501,330],{"class":87},[77,4503,463],{"class":111},[77,4505,342],{"class":87},[77,4507,4508,4510,4512,4515,4517,4520,4523,4525,4528,4530,4533,4535,4537],{"class":79,"line":468},[77,4509,471],{"class":83},[77,4511,474],{"class":111},[77,4513,4514],{"class":87}," :class",[77,4516,336],{"class":83},[77,4518,4519],{"class":94},"\"classObject\"",[77,4521,4522],{"class":87}," @click",[77,4524,336],{"class":83},[77,4526,4527],{"class":94},"\"changeClass\"",[77,4529,1217],{"class":83},[77,4531,4532],{"class":87},"クリックで背景色が変わる",[77,4534,445],{"class":83},[77,4536,474],{"class":87},[77,4538,342],{"class":83},[77,4540,4541,4543,4545],{"class":79,"line":479},[77,4542,445],{"class":83},[77,4544,463],{"class":87},[77,4546,342],{"class":83},[10,4548,762,4549],{},[26,4550,4553],{"href":4551,"rel":4552},"https:\u002F\u002Fja.vuejs.org\u002Fguide\u002Fessentials\u002Fclass-and-style.html",[771],"クラスとスタイルのバインディング",[43,4555,4556],{"id":4556},"まとめ",[10,4558,4559],{},"この記事ではVue3やNuxt3利用時によくわからなくなることをまとめました。",[10,4561,4562],{},"親子間のコンポーネントのデータのやり取りの方法や書き方、slotの使い方、その他細かいところで気になることについて書きました。",[4564,4565,4566],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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 pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":73,"searchDepth":98,"depth":98,"links":4568},[4569,4570,4571,4576,4580,4581,4582,4583,4584],{"id":45,"depth":98,"text":46},{"id":62,"depth":98,"text":63},{"id":273,"depth":98,"text":273,"children":4572},[4573,4574,4575],{"id":297,"depth":124,"text":297},{"id":782,"depth":124,"text":783},{"id":1485,"depth":124,"text":1486},{"id":2611,"depth":98,"text":2611,"children":4577},[4578,4579],{"id":2814,"depth":124,"text":2814},{"id":3188,"depth":124,"text":3188},{"id":3986,"depth":98,"text":3986},{"id":4256,"depth":98,"text":4257},{"id":4286,"depth":98,"text":4287},{"id":4303,"depth":98,"text":4304},{"id":4556,"depth":98,"text":4556},"2023-10-02","Vue3の子と親のコンポーネント間での情報のやり取りや、スロットの使い方について、リアクティブな変数、その他細かいところで私が気になったポイントを中心にお伝えします。フィードバックや意見をお待ちしております",false,"md",{},"\u002Fcontents\u002Fvue3",{"title":5,"description":4586},"contents\u002Fvue3",[4594,4595],"Vue","Nuxt","\u002Fimg\u002Fvue3-nuxt3\u002Fthumbnail.png","6SxRiEw7s5CBvPb4twm48Wf5nLOOfvM_8dvha74oA64",[4599,4603],{"title":4600,"path":4601,"stem":4602,"children":-1},"VikingMem: A Memory Base Management System for Stateful LLM-based Applications","\u002Fcontents\u002Fvikingmem-memory-base","contents\u002Fvikingmem-memory-base",{"title":4604,"path":4605,"stem":4606,"children":-1},"vue3とnuxt3をvue2初心者が触ってみた","\u002Fcontents\u002Fvue3nuxt3","contents\u002Fvue3nuxt3",1784936718945]