[{"data":1,"prerenderedAt":2052},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue的插槽和原理":3},{"id":4,"title":5,"body":6,"description":19,"extension":2046,"meta":2047,"navigation":1696,"path":2048,"seo":2049,"stem":2050,"__hash__":2051},"content\u002FVue\u002FVue的插槽和原理.md","Vue的插槽和原理",{"type":7,"value":8,"toc":2034},"minimark",[9,13,202,205,251,254,291,294,465,469,485,643,646,675,800,804,815,1152,1193,1196,1218,1221,1234,1320,1323,1349,1764,1773,1983,1990,2030],[10,11,12],"h2",{"id":12},"样例代码",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-vue shiki shiki-themes github-light github-dark","\u003C!-- 子组件comA -->\n\u003Ctemplate>\n  \u003Cdiv class='demo'>\n    \u003Cslot>\u003Cslot>\n    \u003Cslot name='test'>\u003C\u002Fslot>\n    \u003Cslot name='scopedSlots' test='demo'>\u003C\u002Fslot>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003C!-- 父组件 -->\n\u003CcomA>\n  \u003Cspan>这是默认插槽\u003C\u002Fspan>\n  \u003Ctemplate slot='test'>这是具名插槽\u003C\u002Ftemplate>\n  \u003Ctemplate slot='scopedSlots' slot-scope='scope'>这是作用域插槽（老版）{{scope.test}}\u003C\u002Ftemplate>\n  \u003Ctemplate v-slot:scopedSlots='scopeProps' slot-scope='scope'>这是作用域插槽（新版）{{scopeProps.test}}\u003C\u002Ftemplate>\n\u003C\u002FcomA>\n","vue","",[21,22,23,32,46,68,84,106,133,143,153,159,169,175,181,187,193],"code",{"__ignoreMap":19},[24,25,28],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sJ8bj","\u003C!-- 子组件comA -->\n",[24,33,35,39,43],{"class":26,"line":34},2,[24,36,38],{"class":37},"sVt8B","\u003C",[24,40,42],{"class":41},"s9eBZ","template",[24,44,45],{"class":37},">\n",[24,47,49,52,55,59,62,66],{"class":26,"line":48},3,[24,50,51],{"class":37},"  \u003C",[24,53,54],{"class":41},"div",[24,56,58],{"class":57},"sScJk"," class",[24,60,61],{"class":37},"=",[24,63,65],{"class":64},"sZZnC","'demo'",[24,67,45],{"class":37},[24,69,71,74,77,80,82],{"class":26,"line":70},4,[24,72,73],{"class":37},"    \u003C",[24,75,76],{"class":41},"slot",[24,78,79],{"class":37},">\u003C",[24,81,76],{"class":41},[24,83,45],{"class":37},[24,85,87,89,91,94,96,99,102,104],{"class":26,"line":86},5,[24,88,73],{"class":37},[24,90,76],{"class":41},[24,92,93],{"class":57}," name",[24,95,61],{"class":37},[24,97,98],{"class":64},"'test'",[24,100,101],{"class":37},">\u003C\u002F",[24,103,76],{"class":41},[24,105,45],{"class":37},[24,107,109,111,113,115,117,120,123,125,127,129,131],{"class":26,"line":108},6,[24,110,73],{"class":37},[24,112,76],{"class":41},[24,114,93],{"class":57},[24,116,61],{"class":37},[24,118,119],{"class":64},"'scopedSlots'",[24,121,122],{"class":57}," test",[24,124,61],{"class":37},[24,126,65],{"class":64},[24,128,101],{"class":37},[24,130,76],{"class":41},[24,132,45],{"class":37},[24,134,136,139,141],{"class":26,"line":135},7,[24,137,138],{"class":37},"  \u003C\u002F",[24,140,54],{"class":41},[24,142,45],{"class":37},[24,144,146,149,151],{"class":26,"line":145},8,[24,147,148],{"class":37},"\u003C\u002F",[24,150,42],{"class":41},[24,152,45],{"class":37},[24,154,156],{"class":26,"line":155},9,[24,157,158],{"class":30},"\u003C!-- 父组件 -->\n",[24,160,162,164,167],{"class":26,"line":161},10,[24,163,38],{"class":37},[24,165,166],{"class":41},"comA",[24,168,45],{"class":37},[24,170,172],{"class":26,"line":171},11,[24,173,174],{"class":37},"  \u003Cspan>这是默认插槽\u003C\u002Fspan>\n",[24,176,178],{"class":26,"line":177},12,[24,179,180],{"class":37},"  \u003Ctemplate slot='test'>这是具名插槽\u003C\u002Ftemplate>\n",[24,182,184],{"class":26,"line":183},13,[24,185,186],{"class":37},"  \u003Ctemplate slot='scopedSlots' slot-scope='scope'>这是作用域插槽（老版）{{scope.test}}\u003C\u002Ftemplate>\n",[24,188,190],{"class":26,"line":189},14,[24,191,192],{"class":37},"  \u003Ctemplate v-slot:scopedSlots='scopeProps' slot-scope='scope'>这是作用域插槽（新版）{{scopeProps.test}}\u003C\u002Ftemplate>\n",[24,194,196,198,200],{"class":26,"line":195},15,[24,197,148],{"class":37},[24,199,166],{"class":41},[24,201,45],{"class":37},[10,203,204],{"id":204},"实现原理",[206,207,208,210,211,214,215,214,218,221,222,225,226,229,230,232,233,236,237,240,241,244,245,247,248,250],"p",{},[21,209,18],{},"组件实例化顺序为：父组件状态初始化(",[21,212,213],{},"data","、",[21,216,217],{},"computed",[21,219,220],{},"watch","...) --> 模板编译 --> 生成",[21,223,224],{},"render","方法 --> 实例化渲染",[21,227,228],{},"watcher"," --> 调用",[21,231,224],{},"方法，生成",[21,234,235],{},"VNode"," --> ",[21,238,239],{},"patch VNode","，转换为真实",[21,242,243],{},"DOM"," --> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实",[21,246,243],{},"挂载到父组件生成的真实",[21,249,243],{},"上，挂载到页面中 --> 移除旧节点",[206,252,253],{},"从上述流程中，可以推测出：",[255,256,257,261,274],"ol",{},[258,259,260],"li",{},"父组件模板解析在子组件之前，所以父组件首先会获取到插槽模板内容",[258,262,263,264,266,267,269,270,273],{},"子组件模板解析在后，所以在子组件调用",[21,265,224],{},"方法生成",[21,268,235],{},"时，可以借助部分手段，拿到插槽的",[21,271,272],{},"[VNode](https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=173063685&content_type=Article&match_order=4&q=VNode&zhida_source=entity)","节点",[258,275,276,277,284,285,287,288],{},"作用域插槽可以获取子组件",[278,279,283],"a",{"href":280,"rel":281},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=173063685&content_type=Article&match_order=1&q=%E5%86%85%E5%8F%98%E9%87%8F&zhida_source=entity",[282],"nofollow","内变量","，因此作用域插槽的",[21,286,235],{},"生成，是动态的，即需要实时传入子组件的作用域",[21,289,290],{},"scope",[206,292,293],{},"以下面代码为例，简要概述插槽运转的过程。",[14,295,299],{"className":296,"code":297,"language":298,"meta":19,"style":19},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv id='app'>\n  \u003Ctest>\n    \u003Ctemplate slot=\"hello\">\n      123\n    \u003C\u002Ftemplate>\n  \u003C\u002Ftest>\n\u003C\u002Fdiv>\n\u003Cscript>\n  new Vue({\n    el: '#app',\n    components: {\n      test: {\n        template: '\u003Ch1>' +\n          '\u003Cslot name=\"hello\">\u003C\u002Fslot>' +\n          '\u003C\u002Fh1>'\n      }\n    }\n  })\n\u003C\u002Fscript>\n","html",[21,300,301,317,327,343,348,357,365,373,382,394,405,410,415,426,433,438,444,450,456],{"__ignoreMap":19},[24,302,303,305,307,310,312,315],{"class":26,"line":27},[24,304,38],{"class":37},[24,306,54],{"class":41},[24,308,309],{"class":57}," id",[24,311,61],{"class":37},[24,313,314],{"class":64},"'app'",[24,316,45],{"class":37},[24,318,319,321,325],{"class":26,"line":34},[24,320,51],{"class":37},[24,322,324],{"class":323},"s7hpK","test",[24,326,45],{"class":37},[24,328,329,331,333,336,338,341],{"class":26,"line":48},[24,330,73],{"class":37},[24,332,42],{"class":41},[24,334,335],{"class":57}," slot",[24,337,61],{"class":37},[24,339,340],{"class":64},"\"hello\"",[24,342,45],{"class":37},[24,344,345],{"class":26,"line":70},[24,346,347],{"class":37},"      123\n",[24,349,350,353,355],{"class":26,"line":86},[24,351,352],{"class":37},"    \u003C\u002F",[24,354,42],{"class":41},[24,356,45],{"class":37},[24,358,359,361,363],{"class":26,"line":108},[24,360,138],{"class":37},[24,362,324],{"class":323},[24,364,45],{"class":37},[24,366,367,369,371],{"class":26,"line":135},[24,368,148],{"class":37},[24,370,54],{"class":41},[24,372,45],{"class":37},[24,374,375,377,380],{"class":26,"line":145},[24,376,38],{"class":37},[24,378,379],{"class":41},"script",[24,381,45],{"class":37},[24,383,384,388,391],{"class":26,"line":155},[24,385,387],{"class":386},"szBVR","  new",[24,389,390],{"class":57}," Vue",[24,392,393],{"class":37},"({\n",[24,395,396,399,402],{"class":26,"line":161},[24,397,398],{"class":37},"    el: ",[24,400,401],{"class":64},"'#app'",[24,403,404],{"class":37},",\n",[24,406,407],{"class":26,"line":171},[24,408,409],{"class":37},"    components: {\n",[24,411,412],{"class":26,"line":177},[24,413,414],{"class":37},"      test: {\n",[24,416,417,420,423],{"class":26,"line":183},[24,418,419],{"class":37},"        template: ",[24,421,422],{"class":64},"'\u003Ch1>'",[24,424,425],{"class":386}," +\n",[24,427,428,431],{"class":26,"line":189},[24,429,430],{"class":64},"          '\u003Cslot name=\"hello\">\u003C\u002Fslot>'",[24,432,425],{"class":386},[24,434,435],{"class":26,"line":195},[24,436,437],{"class":64},"          '\u003C\u002Fh1>'\n",[24,439,441],{"class":26,"line":440},16,[24,442,443],{"class":37},"      }\n",[24,445,447],{"class":26,"line":446},17,[24,448,449],{"class":37},"    }\n",[24,451,453],{"class":26,"line":452},18,[24,454,455],{"class":37},"  })\n",[24,457,459,461,463],{"class":26,"line":458},19,[24,460,148],{"class":37},[24,462,379],{"class":41},[24,464,45],{"class":37},[466,467,468],"h3",{"id":468},"父组件编译阶段",[206,470,471,472,475,476,478,479,484],{},"编译是将模板文件解析成",[21,473,474],{},"AST","语法树，会将插槽",[21,477,42],{},"解析成如下",[278,480,483],{"href":481,"rel":482},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=173063685&content_type=Article&match_order=1&q=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84&zhida_source=entity",[282],"数据结构","：",[14,486,490],{"className":487,"code":488,"language":489,"meta":19,"style":19},"language-js shiki shiki-themes github-light github-dark","{\n  tag: 'test',\n  scopedSlots: { \u002F\u002F 作用域插槽\n    \u002F\u002F slotName: ASTNode,\n    \u002F\u002F ...\n  }\n  children: [\n    {\n      tag: 'template',\n      \u002F\u002F ...\n      parent: parentASTNode,\n      children: [ childASTNode ], \u002F\u002F 插槽内容子节点，即文本节点123\n      slotScope: undefined, \u002F\u002F 作用域插槽绑定值\n      slotTarget: \"\\\"hello\\\"\", \u002F\u002F 具名插槽名称\n      slotTargetDynamic: false \u002F\u002F 是否是动态绑定插槽\n      \u002F\u002F ...\n    }\n  ]\n}\n","js",[21,491,492,497,509,520,525,530,535,543,548,558,563,568,576,591,614,625,629,633,638],{"__ignoreMap":19},[24,493,494],{"class":26,"line":27},[24,495,496],{"class":37},"{\n",[24,498,499,502,505,507],{"class":26,"line":34},[24,500,501],{"class":57},"  tag",[24,503,504],{"class":37},": ",[24,506,98],{"class":64},[24,508,404],{"class":37},[24,510,511,514,517],{"class":26,"line":48},[24,512,513],{"class":57},"  scopedSlots",[24,515,516],{"class":37},": { ",[24,518,519],{"class":30},"\u002F\u002F 作用域插槽\n",[24,521,522],{"class":26,"line":70},[24,523,524],{"class":30},"    \u002F\u002F slotName: ASTNode,\n",[24,526,527],{"class":26,"line":86},[24,528,529],{"class":30},"    \u002F\u002F ...\n",[24,531,532],{"class":26,"line":108},[24,533,534],{"class":37},"  }\n",[24,536,537,540],{"class":26,"line":135},[24,538,539],{"class":57},"  children",[24,541,542],{"class":37},": [\n",[24,544,545],{"class":26,"line":145},[24,546,547],{"class":37},"    {\n",[24,549,550,553,556],{"class":26,"line":155},[24,551,552],{"class":37},"      tag: ",[24,554,555],{"class":64},"'template'",[24,557,404],{"class":37},[24,559,560],{"class":26,"line":161},[24,561,562],{"class":30},"      \u002F\u002F ...\n",[24,564,565],{"class":26,"line":171},[24,566,567],{"class":37},"      parent: parentASTNode,\n",[24,569,570,573],{"class":26,"line":177},[24,571,572],{"class":37},"      children: [ childASTNode ], ",[24,574,575],{"class":30},"\u002F\u002F 插槽内容子节点，即文本节点123\n",[24,577,578,581,585,588],{"class":26,"line":183},[24,579,580],{"class":37},"      slotScope: ",[24,582,584],{"class":583},"sj4cs","undefined",[24,586,587],{"class":37},", ",[24,589,590],{"class":30},"\u002F\u002F 作用域插槽绑定值\n",[24,592,593,596,599,602,605,607,609,611],{"class":26,"line":189},[24,594,595],{"class":37},"      slotTarget: ",[24,597,598],{"class":64},"\"",[24,600,601],{"class":583},"\\\"",[24,603,604],{"class":64},"hello",[24,606,601],{"class":583},[24,608,598],{"class":64},[24,610,587],{"class":37},[24,612,613],{"class":30},"\u002F\u002F 具名插槽名称\n",[24,615,616,619,622],{"class":26,"line":195},[24,617,618],{"class":37},"      slotTargetDynamic: ",[24,620,621],{"class":583},"false",[24,623,624],{"class":30}," \u002F\u002F 是否是动态绑定插槽\n",[24,626,627],{"class":26,"line":440},[24,628,562],{"class":30},[24,630,631],{"class":26,"line":446},[24,632,449],{"class":37},[24,634,635],{"class":26,"line":452},[24,636,637],{"class":37},"  ]\n",[24,639,640],{"class":26,"line":458},[24,641,642],{"class":37},"}\n",[466,644,645],{"id":645},"父组件生成渲染方法",[206,647,648,649,651,656,657,659,660,662,663,666,667,670,671,674],{},"根据",[21,650,474],{},[278,652,655],{"href":653,"rel":654},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=173063685&content_type=Article&match_order=2&q=%E8%AF%AD%E6%B3%95%E6%A0%91&zhida_source=entity",[282],"语法树","，解析生成渲染方法字符串，最终父组件生成的结果如下所示，这个结构和我们直接写",[21,658,224],{},"方法一致，本质都是生成",[21,661,235],{},", 只不过",[21,664,665],{},"_c","或",[21,668,669],{},"h","是",[21,672,673],{},"this.$createElement","的缩写。",[14,676,678],{"className":487,"code":677,"language":489,"meta":19,"style":19},"with(this){\n  return _c('div',{attrs:{\"id\":\"app\"}},\n  [_c('test',\n    [\n      _c('template',{slot:\"hello\"},[_v(\"\\n      123\\n    \")])],2)\n    ],\n  1)\n}\n",[21,679,680,694,722,735,740,784,789,796],{"__ignoreMap":19},[24,681,682,685,688,691],{"class":26,"line":27},[24,683,684],{"class":386},"with",[24,686,687],{"class":37},"(",[24,689,690],{"class":583},"this",[24,692,693],{"class":37},"){\n",[24,695,696,699,702,704,707,710,713,716,719],{"class":26,"line":34},[24,697,698],{"class":386},"  return",[24,700,701],{"class":57}," _c",[24,703,687],{"class":37},[24,705,706],{"class":64},"'div'",[24,708,709],{"class":37},",{attrs:{",[24,711,712],{"class":64},"\"id\"",[24,714,715],{"class":37},":",[24,717,718],{"class":64},"\"app\"",[24,720,721],{"class":37},"}},\n",[24,723,724,727,729,731,733],{"class":26,"line":48},[24,725,726],{"class":37},"  [",[24,728,665],{"class":57},[24,730,687],{"class":37},[24,732,98],{"class":64},[24,734,404],{"class":37},[24,736,737],{"class":26,"line":70},[24,738,739],{"class":37},"    [\n",[24,741,742,745,747,749,752,754,757,760,762,764,767,770,772,775,778,781],{"class":26,"line":86},[24,743,744],{"class":57},"      _c",[24,746,687],{"class":37},[24,748,555],{"class":64},[24,750,751],{"class":37},",{slot:",[24,753,340],{"class":64},[24,755,756],{"class":37},"},[",[24,758,759],{"class":57},"_v",[24,761,687],{"class":37},[24,763,598],{"class":64},[24,765,766],{"class":583},"\\n",[24,768,769],{"class":64},"      123",[24,771,766],{"class":583},[24,773,774],{"class":64},"    \"",[24,776,777],{"class":37},")])],",[24,779,780],{"class":583},"2",[24,782,783],{"class":37},")\n",[24,785,786],{"class":26,"line":108},[24,787,788],{"class":37},"    ],\n",[24,790,791,794],{"class":26,"line":135},[24,792,793],{"class":583},"  1",[24,795,783],{"class":37},[24,797,798],{"class":26,"line":145},[24,799,642],{"class":37},[466,801,803],{"id":802},"父组件生成vnode","父组件生成VNode",[206,805,806,807,232,809,811,812,814],{},"调用",[21,808,224],{},[21,810,235],{},",",[21,813,235],{},"具体格式如下：",[14,816,818],{"className":487,"code":817,"language":489,"meta":19,"style":19},"{\n  tag: 'div',\n  parent: undefined,\n  data: { \u002F\u002F 存储VNode配置项\n    attrs: { id: '#app' }\n  },\n  context: componentContext, \u002F\u002F 组件作用域\n  elm: undefined, \u002F\u002F 真实DOM元素\n  children: [\n    {\n      tag: 'vue-component-1-test',\n      children: undefined, \u002F\u002F 组件为页面最小组成单元，插槽内容放放到子组件中解析\n      parent: undefined,\n      componentOptions: { \u002F\u002F 组件配置项\n        Ctor: VueComponentCtor, \u002F\u002F 组件构造方法\n        data: {\n          hook: {\n            init: fn, \u002F\u002F 实例化组件调用方法\n            insert: fn,\n            prepatch: fn,\n            destroy: fn\n          },\n          scopedSlots: { \u002F\u002F 作用域插槽配置项，用于生成作用域插槽VNode\n            slotName: slotFn\n          }\n        },\n        children: [ \u002F\u002F 组件插槽节点\n          tag: 'template',\n          propsData: undefined, \u002F\u002F props参数\n          listeners: undefined,\n          data: {\n            slot: 'hello'\n          },\n          children: [ VNode ],\n          parent: undefined,\n          context: componentContext \u002F\u002F 父组件作用域\n          \u002F\u002F ...\n        ] \n      }\n    }\n  ],\n  \u002F\u002F ...\n}\n",[21,819,820,824,834,845,855,872,877,888,902,908,912,921,933,942,950,958,963,968,976,981,987,993,999,1008,1014,1020,1026,1035,1045,1058,1068,1074,1083,1088,1094,1104,1113,1119,1125,1130,1135,1141,1147],{"__ignoreMap":19},[24,821,822],{"class":26,"line":27},[24,823,496],{"class":37},[24,825,826,828,830,832],{"class":26,"line":34},[24,827,501],{"class":57},[24,829,504],{"class":37},[24,831,706],{"class":64},[24,833,404],{"class":37},[24,835,836,839,841,843],{"class":26,"line":48},[24,837,838],{"class":57},"  parent",[24,840,504],{"class":37},[24,842,584],{"class":583},[24,844,404],{"class":37},[24,846,847,850,852],{"class":26,"line":70},[24,848,849],{"class":57},"  data",[24,851,516],{"class":37},[24,853,854],{"class":30},"\u002F\u002F 存储VNode配置项\n",[24,856,857,860,862,865,867,869],{"class":26,"line":86},[24,858,859],{"class":57},"    attrs",[24,861,516],{"class":37},[24,863,864],{"class":57},"id",[24,866,504],{"class":37},[24,868,401],{"class":64},[24,870,871],{"class":37}," }\n",[24,873,874],{"class":26,"line":108},[24,875,876],{"class":37},"  },\n",[24,878,879,882,885],{"class":26,"line":135},[24,880,881],{"class":57},"  context",[24,883,884],{"class":37},": componentContext, ",[24,886,887],{"class":30},"\u002F\u002F 组件作用域\n",[24,889,890,893,895,897,899],{"class":26,"line":145},[24,891,892],{"class":57},"  elm",[24,894,504],{"class":37},[24,896,584],{"class":583},[24,898,587],{"class":37},[24,900,901],{"class":30},"\u002F\u002F 真实DOM元素\n",[24,903,904,906],{"class":26,"line":155},[24,905,539],{"class":57},[24,907,542],{"class":37},[24,909,910],{"class":26,"line":161},[24,911,547],{"class":37},[24,913,914,916,919],{"class":26,"line":171},[24,915,552],{"class":37},[24,917,918],{"class":64},"'vue-component-1-test'",[24,920,404],{"class":37},[24,922,923,926,928,930],{"class":26,"line":177},[24,924,925],{"class":37},"      children: ",[24,927,584],{"class":583},[24,929,587],{"class":37},[24,931,932],{"class":30},"\u002F\u002F 组件为页面最小组成单元，插槽内容放放到子组件中解析\n",[24,934,935,938,940],{"class":26,"line":183},[24,936,937],{"class":37},"      parent: ",[24,939,584],{"class":583},[24,941,404],{"class":37},[24,943,944,947],{"class":26,"line":189},[24,945,946],{"class":37},"      componentOptions: { ",[24,948,949],{"class":30},"\u002F\u002F 组件配置项\n",[24,951,952,955],{"class":26,"line":195},[24,953,954],{"class":37},"        Ctor: VueComponentCtor, ",[24,956,957],{"class":30},"\u002F\u002F 组件构造方法\n",[24,959,960],{"class":26,"line":440},[24,961,962],{"class":37},"        data: {\n",[24,964,965],{"class":26,"line":446},[24,966,967],{"class":37},"          hook: {\n",[24,969,970,973],{"class":26,"line":452},[24,971,972],{"class":37},"            init: fn, ",[24,974,975],{"class":30},"\u002F\u002F 实例化组件调用方法\n",[24,977,978],{"class":26,"line":458},[24,979,980],{"class":37},"            insert: fn,\n",[24,982,984],{"class":26,"line":983},20,[24,985,986],{"class":37},"            prepatch: fn,\n",[24,988,990],{"class":26,"line":989},21,[24,991,992],{"class":37},"            destroy: fn\n",[24,994,996],{"class":26,"line":995},22,[24,997,998],{"class":37},"          },\n",[24,1000,1002,1005],{"class":26,"line":1001},23,[24,1003,1004],{"class":37},"          scopedSlots: { ",[24,1006,1007],{"class":30},"\u002F\u002F 作用域插槽配置项，用于生成作用域插槽VNode\n",[24,1009,1011],{"class":26,"line":1010},24,[24,1012,1013],{"class":37},"            slotName: slotFn\n",[24,1015,1017],{"class":26,"line":1016},25,[24,1018,1019],{"class":37},"          }\n",[24,1021,1023],{"class":26,"line":1022},26,[24,1024,1025],{"class":37},"        },\n",[24,1027,1029,1032],{"class":26,"line":1028},27,[24,1030,1031],{"class":37},"        children: [ ",[24,1033,1034],{"class":30},"\u002F\u002F 组件插槽节点\n",[24,1036,1038,1041,1043],{"class":26,"line":1037},28,[24,1039,1040],{"class":37},"          tag: ",[24,1042,555],{"class":64},[24,1044,404],{"class":37},[24,1046,1048,1051,1053,1055],{"class":26,"line":1047},29,[24,1049,1050],{"class":37},"          propsData: ",[24,1052,584],{"class":583},[24,1054,587],{"class":37},[24,1056,1057],{"class":30},"\u002F\u002F props参数\n",[24,1059,1061,1064,1066],{"class":26,"line":1060},30,[24,1062,1063],{"class":37},"          listeners: ",[24,1065,584],{"class":583},[24,1067,404],{"class":37},[24,1069,1071],{"class":26,"line":1070},31,[24,1072,1073],{"class":37},"          data: {\n",[24,1075,1077,1080],{"class":26,"line":1076},32,[24,1078,1079],{"class":37},"            slot: ",[24,1081,1082],{"class":64},"'hello'\n",[24,1084,1086],{"class":26,"line":1085},33,[24,1087,998],{"class":37},[24,1089,1091],{"class":26,"line":1090},34,[24,1092,1093],{"class":37},"          children: [ VNode ],\n",[24,1095,1097,1100,1102],{"class":26,"line":1096},35,[24,1098,1099],{"class":37},"          parent: ",[24,1101,584],{"class":583},[24,1103,404],{"class":37},[24,1105,1107,1110],{"class":26,"line":1106},36,[24,1108,1109],{"class":37},"          context: componentContext ",[24,1111,1112],{"class":30},"\u002F\u002F 父组件作用域\n",[24,1114,1116],{"class":26,"line":1115},37,[24,1117,1118],{"class":30},"          \u002F\u002F ...\n",[24,1120,1122],{"class":26,"line":1121},38,[24,1123,1124],{"class":37},"        ] \n",[24,1126,1128],{"class":26,"line":1127},39,[24,1129,443],{"class":37},[24,1131,1133],{"class":26,"line":1132},40,[24,1134,449],{"class":37},[24,1136,1138],{"class":26,"line":1137},41,[24,1139,1140],{"class":37},"  ],\n",[24,1142,1144],{"class":26,"line":1143},42,[24,1145,1146],{"class":30},"  \u002F\u002F ...\n",[24,1148,1150],{"class":26,"line":1149},43,[24,1151,642],{"class":37},[206,1153,1154,1155,1157,1158,1162,1163,1165,1166,1168,1169,1171,1172,1174,1175,1178,1179,1182,1183,1186,1187,1182,1190,1192],{},"在",[21,1156,18],{},"中，",[1159,1160,1161],"strong",{},"组件是页面结构的基本单元","，从上述的",[21,1164,235],{},"中，我们也可以看出，",[21,1167,235],{},"页面层级结构结束于",[21,1170,324],{},"组件，",[21,1173,324],{},"组件",[21,1176,1177],{},"children","处理会在子组件初始化过程中处理。子组件构造方法组装与属性合并在",[1159,1180,1181],{},"vue-dev\\src\\core\\vdom\\create-component.js"," ",[21,1184,1185],{},"createComponent","方法中，组件实例化调用入口是在",[1159,1188,1189],{},"vue-dev\\src\\core\\vdom\\patch.js",[21,1191,1185],{},"方法中。",[466,1194,1195],{"id":1195},"子组件状态初始化",[206,1197,1198,1201,1202,1205,1206,1209,1210,1213,1214,1217],{},[1159,1199,1200],{},"实例化子组件时","，会在",[21,1203,1204],{},"initRender"," -> ",[21,1207,1208],{},"resolveSlots","方法中，将子组件插槽节点挂载到组件作用域",[21,1211,1212],{},"vm","中，挂载形式为",[21,1215,1216],{},"vm.$slots = {slotName: [VNode]}","形式。",[466,1219,1220],{"id":1220},"子组件编译阶段",[206,1222,1223,1224,1227,1228,1230,1231,1233],{},"子组件在",[1159,1225,1226],{},"编译阶段","，会将",[21,1229,76],{},"节点，编译成以下",[21,1232,474],{},"结构：",[14,1235,1237],{"className":487,"code":1236,"language":489,"meta":19,"style":19},"{\n  tag: 'h1',\n  parent: undefined,\n  children: [\n    {\n      tag: 'slot',\n      slotName: \"\\\"hello\\\"\",\n      \u002F\u002F ...\n    }\n  ],\n  \u002F\u002F ...\n}\n",[21,1238,1239,1243,1254,1264,1270,1274,1283,1300,1304,1308,1312,1316],{"__ignoreMap":19},[24,1240,1241],{"class":26,"line":27},[24,1242,496],{"class":37},[24,1244,1245,1247,1249,1252],{"class":26,"line":34},[24,1246,501],{"class":57},[24,1248,504],{"class":37},[24,1250,1251],{"class":64},"'h1'",[24,1253,404],{"class":37},[24,1255,1256,1258,1260,1262],{"class":26,"line":48},[24,1257,838],{"class":57},[24,1259,504],{"class":37},[24,1261,584],{"class":583},[24,1263,404],{"class":37},[24,1265,1266,1268],{"class":26,"line":70},[24,1267,539],{"class":57},[24,1269,542],{"class":37},[24,1271,1272],{"class":26,"line":86},[24,1273,547],{"class":37},[24,1275,1276,1278,1281],{"class":26,"line":108},[24,1277,552],{"class":37},[24,1279,1280],{"class":64},"'slot'",[24,1282,404],{"class":37},[24,1284,1285,1288,1290,1292,1294,1296,1298],{"class":26,"line":135},[24,1286,1287],{"class":37},"      slotName: ",[24,1289,598],{"class":64},[24,1291,601],{"class":583},[24,1293,604],{"class":64},[24,1295,601],{"class":583},[24,1297,598],{"class":64},[24,1299,404],{"class":37},[24,1301,1302],{"class":26,"line":145},[24,1303,562],{"class":30},[24,1305,1306],{"class":26,"line":155},[24,1307,449],{"class":37},[24,1309,1310],{"class":26,"line":161},[24,1311,1140],{"class":37},[24,1313,1314],{"class":26,"line":171},[24,1315,1146],{"class":30},[24,1317,1318],{"class":26,"line":177},[24,1319,642],{"class":37},[466,1321,1322],{"id":1322},"子组件生成渲染方法",[206,1324,1325,1326,1329,1330,1333,1334,1337,1338,1340,1341,1344,1345,1348],{},"生成的",[1159,1327,1328],{},"渲染方法","如下，其中",[21,1331,1332],{},"_t","为",[21,1335,1336],{},"renderSlot","方法的简写，从",[21,1339,1336],{},"方法，我们就可以直观的将",[1159,1342,1343],{},"插槽内容","与",[1159,1346,1347],{},"插槽点","联系在一起。",[14,1350,1352],{"className":487,"code":1351,"language":489,"meta":19,"style":19},"\u002F\u002F 渲染方法\nwith(this){\n  return _c('h1',[ _t(\"hello\") ], 2)\n}\n\u002F\u002F 源码路径：vue-dev\\src\\core\\instance\\render-helpers\\render-slot.js\nexport function renderSlot (\n  name: string,\n  fallback: ?Array\u003CVNode>,\n  props: ?Object,\n  bindObject: ?Object\n): ?Array\u003CVNode> {\n  const scopedSlotFn = this.$scopedSlots[name]\n  let nodes\n  if (scopedSlotFn) { \u002F\u002F scoped slot\n    props = props || {}\n    if (bindObject) {\n      if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {\n        warn(\n          'slot v-bind without argument expects an Object',\n          this\n        )\n      }\n      props = extend(extend({}, bindObject), props)\n    }\n    \u002F\u002F 作用域插槽，获取插槽VNode\n    nodes = scopedSlotFn(props) || fallback\n  } else {\n    \u002F\u002F 获取插槽普通插槽VNode\n    nodes = this.$slots[name] || fallback\n  }\n\n  const target = props && props.slot\n  if (target) {\n    return this.$createElement('template', { slot: target }, nodes)\n  } else {\n    return nodes\n  }\n}\n",[21,1353,1354,1359,1369,1395,1399,1404,1418,1431,1451,1465,1477,1495,1512,1520,1531,1547,1555,1584,1592,1599,1604,1609,1613,1631,1635,1640,1657,1668,1673,1688,1692,1698,1715,1722,1742,1750,1756,1760],{"__ignoreMap":19},[24,1355,1356],{"class":26,"line":27},[24,1357,1358],{"class":30},"\u002F\u002F 渲染方法\n",[24,1360,1361,1363,1365,1367],{"class":26,"line":34},[24,1362,684],{"class":386},[24,1364,687],{"class":37},[24,1366,690],{"class":583},[24,1368,693],{"class":37},[24,1370,1371,1373,1375,1377,1379,1382,1384,1386,1388,1391,1393],{"class":26,"line":48},[24,1372,698],{"class":386},[24,1374,701],{"class":57},[24,1376,687],{"class":37},[24,1378,1251],{"class":64},[24,1380,1381],{"class":37},",[ ",[24,1383,1332],{"class":57},[24,1385,687],{"class":37},[24,1387,340],{"class":64},[24,1389,1390],{"class":37},") ], ",[24,1392,780],{"class":583},[24,1394,783],{"class":37},[24,1396,1397],{"class":26,"line":70},[24,1398,642],{"class":37},[24,1400,1401],{"class":26,"line":86},[24,1402,1403],{"class":30},"\u002F\u002F 源码路径：vue-dev\\src\\core\\instance\\render-helpers\\render-slot.js\n",[24,1405,1406,1409,1412,1415],{"class":26,"line":108},[24,1407,1408],{"class":386},"export",[24,1410,1411],{"class":386}," function",[24,1413,1414],{"class":57}," renderSlot",[24,1416,1417],{"class":37}," (\n",[24,1419,1420,1424,1426,1429],{"class":26,"line":135},[24,1421,1423],{"class":1422},"s4XuR","  name",[24,1425,715],{"class":386},[24,1427,1428],{"class":583}," string",[24,1430,404],{"class":37},[24,1432,1433,1436,1438,1441,1444,1446,1448],{"class":26,"line":145},[24,1434,1435],{"class":1422},"  fallback",[24,1437,715],{"class":386},[24,1439,1440],{"class":386}," ?",[24,1442,1443],{"class":57},"Array",[24,1445,38],{"class":37},[24,1447,235],{"class":57},[24,1449,1450],{"class":37},">,\n",[24,1452,1453,1456,1458,1460,1463],{"class":26,"line":155},[24,1454,1455],{"class":1422},"  props",[24,1457,715],{"class":386},[24,1459,1440],{"class":386},[24,1461,1462],{"class":57},"Object",[24,1464,404],{"class":37},[24,1466,1467,1470,1472,1474],{"class":26,"line":161},[24,1468,1469],{"class":1422},"  bindObject",[24,1471,715],{"class":386},[24,1473,1440],{"class":386},[24,1475,1476],{"class":57},"Object\n",[24,1478,1479,1482,1484,1486,1488,1490,1492],{"class":26,"line":171},[24,1480,1481],{"class":37},")",[24,1483,715],{"class":386},[24,1485,1440],{"class":386},[24,1487,1443],{"class":57},[24,1489,38],{"class":37},[24,1491,235],{"class":57},[24,1493,1494],{"class":37},"> {\n",[24,1496,1497,1500,1503,1506,1509],{"class":26,"line":177},[24,1498,1499],{"class":386},"  const",[24,1501,1502],{"class":583}," scopedSlotFn",[24,1504,1505],{"class":386}," =",[24,1507,1508],{"class":583}," this",[24,1510,1511],{"class":37},".$scopedSlots[name]\n",[24,1513,1514,1517],{"class":26,"line":183},[24,1515,1516],{"class":386},"  let",[24,1518,1519],{"class":37}," nodes\n",[24,1521,1522,1525,1528],{"class":26,"line":189},[24,1523,1524],{"class":386},"  if",[24,1526,1527],{"class":37}," (scopedSlotFn) { ",[24,1529,1530],{"class":30},"\u002F\u002F scoped slot\n",[24,1532,1533,1536,1538,1541,1544],{"class":26,"line":195},[24,1534,1535],{"class":37},"    props ",[24,1537,61],{"class":386},[24,1539,1540],{"class":37}," props ",[24,1542,1543],{"class":386},"||",[24,1545,1546],{"class":37}," {}\n",[24,1548,1549,1552],{"class":26,"line":440},[24,1550,1551],{"class":386},"    if",[24,1553,1554],{"class":37}," (bindObject) {\n",[24,1556,1557,1560,1563,1566,1569,1572,1575,1578,1581],{"class":26,"line":446},[24,1558,1559],{"class":386},"      if",[24,1561,1562],{"class":37}," (process.env.",[24,1564,1565],{"class":583},"NODE_ENV",[24,1567,1568],{"class":386}," !==",[24,1570,1571],{"class":64}," 'production'",[24,1573,1574],{"class":386}," &&",[24,1576,1577],{"class":386}," !",[24,1579,1580],{"class":57},"isObject",[24,1582,1583],{"class":37},"(bindObject)) {\n",[24,1585,1586,1589],{"class":26,"line":452},[24,1587,1588],{"class":57},"        warn",[24,1590,1591],{"class":37},"(\n",[24,1593,1594,1597],{"class":26,"line":458},[24,1595,1596],{"class":64},"          'slot v-bind without argument expects an Object'",[24,1598,404],{"class":37},[24,1600,1601],{"class":26,"line":983},[24,1602,1603],{"class":583},"          this\n",[24,1605,1606],{"class":26,"line":989},[24,1607,1608],{"class":37},"        )\n",[24,1610,1611],{"class":26,"line":995},[24,1612,443],{"class":37},[24,1614,1615,1618,1620,1623,1625,1628],{"class":26,"line":1001},[24,1616,1617],{"class":37},"      props ",[24,1619,61],{"class":386},[24,1621,1622],{"class":57}," extend",[24,1624,687],{"class":37},[24,1626,1627],{"class":57},"extend",[24,1629,1630],{"class":37},"({}, bindObject), props)\n",[24,1632,1633],{"class":26,"line":1010},[24,1634,449],{"class":37},[24,1636,1637],{"class":26,"line":1016},[24,1638,1639],{"class":30},"    \u002F\u002F 作用域插槽，获取插槽VNode\n",[24,1641,1642,1645,1647,1649,1652,1654],{"class":26,"line":1022},[24,1643,1644],{"class":37},"    nodes ",[24,1646,61],{"class":386},[24,1648,1502],{"class":57},[24,1650,1651],{"class":37},"(props) ",[24,1653,1543],{"class":386},[24,1655,1656],{"class":37}," fallback\n",[24,1658,1659,1662,1665],{"class":26,"line":1028},[24,1660,1661],{"class":37},"  } ",[24,1663,1664],{"class":386},"else",[24,1666,1667],{"class":37}," {\n",[24,1669,1670],{"class":26,"line":1037},[24,1671,1672],{"class":30},"    \u002F\u002F 获取插槽普通插槽VNode\n",[24,1674,1675,1677,1679,1681,1684,1686],{"class":26,"line":1047},[24,1676,1644],{"class":37},[24,1678,61],{"class":386},[24,1680,1508],{"class":583},[24,1682,1683],{"class":37},".$slots[name] ",[24,1685,1543],{"class":386},[24,1687,1656],{"class":37},[24,1689,1690],{"class":26,"line":1060},[24,1691,534],{"class":37},[24,1693,1694],{"class":26,"line":1070},[24,1695,1697],{"emptyLinePlaceholder":1696},true,"\n",[24,1699,1700,1702,1705,1707,1709,1712],{"class":26,"line":1076},[24,1701,1499],{"class":386},[24,1703,1704],{"class":583}," target",[24,1706,1505],{"class":386},[24,1708,1540],{"class":37},[24,1710,1711],{"class":386},"&&",[24,1713,1714],{"class":37}," props.slot\n",[24,1716,1717,1719],{"class":26,"line":1085},[24,1718,1524],{"class":386},[24,1720,1721],{"class":37}," (target) {\n",[24,1723,1724,1727,1729,1732,1735,1737,1739],{"class":26,"line":1090},[24,1725,1726],{"class":386},"    return",[24,1728,1508],{"class":583},[24,1730,1731],{"class":37},".",[24,1733,1734],{"class":57},"$createElement",[24,1736,687],{"class":37},[24,1738,555],{"class":64},[24,1740,1741],{"class":37},", { slot: target }, nodes)\n",[24,1743,1744,1746,1748],{"class":26,"line":1096},[24,1745,1661],{"class":37},[24,1747,1664],{"class":386},[24,1749,1667],{"class":37},[24,1751,1752,1754],{"class":26,"line":1106},[24,1753,1726],{"class":386},[24,1755,1519],{"class":37},[24,1757,1758],{"class":26,"line":1115},[24,1759,534],{"class":37},[24,1761,1762],{"class":26,"line":1121},[24,1763,642],{"class":37},[466,1765,1767,1772],{"id":1766},"作用域插槽与具名插槽区别",[278,1768,1771],{"href":1769,"rel":1770},"https:\u002F\u002Fzhida.zhihu.com\u002Fsearch?content_id=173063685&content_type=Article&match_order=10&q=%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD&zhida_source=entity",[282],"作用域插槽","与具名插槽区别",[14,1774,1776],{"className":296,"code":1775,"language":298,"meta":19,"style":19},"\u003C!-- demo -->\n\u003Cdiv id='app'>\n  \u003Ctest>\n      \u003Ctemplate slot=\"hello\" slot-scope='scope'>\n        {{scope.hello}}\n      \u003C\u002Ftemplate>\n  \u003C\u002Ftest>\n\u003C\u002Fdiv>\n\u003Cscript>\n    var vm = new Vue({\n        el: '#app',\n        components: {\n            test: {\n                data () {\n                    return {\n                        hello: '123'\n                    }\n                },\n                template: '\u003Ch1>' +\n                    '\u003Cslot name=\"hello\" :hello=\"hello\">\u003C\u002Fslot>' +\n                  '\u003C\u002Fh1>'\n            }\n        }\n    })\n\n\u003C\u002Fscript>\n",[21,1777,1778,1783,1797,1805,1828,1833,1842,1850,1858,1866,1883,1892,1897,1902,1910,1917,1925,1930,1935,1944,1951,1956,1961,1966,1971,1975],{"__ignoreMap":19},[24,1779,1780],{"class":26,"line":27},[24,1781,1782],{"class":30},"\u003C!-- demo -->\n",[24,1784,1785,1787,1789,1791,1793,1795],{"class":26,"line":34},[24,1786,38],{"class":37},[24,1788,54],{"class":41},[24,1790,309],{"class":57},[24,1792,61],{"class":37},[24,1794,314],{"class":64},[24,1796,45],{"class":37},[24,1798,1799,1801,1803],{"class":26,"line":48},[24,1800,51],{"class":37},[24,1802,324],{"class":323},[24,1804,45],{"class":37},[24,1806,1807,1810,1812,1814,1816,1818,1821,1823,1826],{"class":26,"line":70},[24,1808,1809],{"class":37},"      \u003C",[24,1811,42],{"class":41},[24,1813,335],{"class":57},[24,1815,61],{"class":37},[24,1817,340],{"class":64},[24,1819,1820],{"class":57}," slot-scope",[24,1822,61],{"class":37},[24,1824,1825],{"class":64},"'scope'",[24,1827,45],{"class":37},[24,1829,1830],{"class":26,"line":86},[24,1831,1832],{"class":37},"        {{scope.hello}}\n",[24,1834,1835,1838,1840],{"class":26,"line":108},[24,1836,1837],{"class":37},"      \u003C\u002F",[24,1839,42],{"class":41},[24,1841,45],{"class":37},[24,1843,1844,1846,1848],{"class":26,"line":135},[24,1845,138],{"class":37},[24,1847,324],{"class":323},[24,1849,45],{"class":37},[24,1851,1852,1854,1856],{"class":26,"line":145},[24,1853,148],{"class":37},[24,1855,54],{"class":41},[24,1857,45],{"class":37},[24,1859,1860,1862,1864],{"class":26,"line":155},[24,1861,38],{"class":37},[24,1863,379],{"class":41},[24,1865,45],{"class":37},[24,1867,1868,1871,1874,1876,1879,1881],{"class":26,"line":161},[24,1869,1870],{"class":386},"    var",[24,1872,1873],{"class":37}," vm ",[24,1875,61],{"class":386},[24,1877,1878],{"class":386}," new",[24,1880,390],{"class":57},[24,1882,393],{"class":37},[24,1884,1885,1888,1890],{"class":26,"line":171},[24,1886,1887],{"class":37},"        el: ",[24,1889,401],{"class":64},[24,1891,404],{"class":37},[24,1893,1894],{"class":26,"line":177},[24,1895,1896],{"class":37},"        components: {\n",[24,1898,1899],{"class":26,"line":183},[24,1900,1901],{"class":37},"            test: {\n",[24,1903,1904,1907],{"class":26,"line":189},[24,1905,1906],{"class":57},"                data",[24,1908,1909],{"class":37}," () {\n",[24,1911,1912,1915],{"class":26,"line":195},[24,1913,1914],{"class":386},"                    return",[24,1916,1667],{"class":37},[24,1918,1919,1922],{"class":26,"line":440},[24,1920,1921],{"class":37},"                        hello: ",[24,1923,1924],{"class":64},"'123'\n",[24,1926,1927],{"class":26,"line":446},[24,1928,1929],{"class":37},"                    }\n",[24,1931,1932],{"class":26,"line":452},[24,1933,1934],{"class":37},"                },\n",[24,1936,1937,1940,1942],{"class":26,"line":458},[24,1938,1939],{"class":37},"                template: ",[24,1941,422],{"class":64},[24,1943,425],{"class":386},[24,1945,1946,1949],{"class":26,"line":983},[24,1947,1948],{"class":64},"                    '\u003Cslot name=\"hello\" :hello=\"hello\">\u003C\u002Fslot>'",[24,1950,425],{"class":386},[24,1952,1953],{"class":26,"line":989},[24,1954,1955],{"class":64},"                  '\u003C\u002Fh1>'\n",[24,1957,1958],{"class":26,"line":995},[24,1959,1960],{"class":37},"            }\n",[24,1962,1963],{"class":26,"line":1001},[24,1964,1965],{"class":37},"        }\n",[24,1967,1968],{"class":26,"line":1010},[24,1969,1970],{"class":37},"    })\n",[24,1972,1973],{"class":26,"line":1016},[24,1974,1697],{"emptyLinePlaceholder":1696},[24,1976,1977,1979,1981],{"class":26,"line":1022},[24,1978,148],{"class":37},[24,1980,379],{"class":41},[24,1982,45],{"class":37},[206,1984,1985,1986,1989],{},"作用域插槽与普通插槽相比，主要区别在于",[1159,1987,1988],{},"插槽内容可以获取到子组件作用域变量","。由于需要注入子组件变量，相比于具名插槽，作用域插槽有以下几点不同：",[1991,1992,1993],"ul",{},[258,1994,1995,1996,1999,2000,2003,2004,2007,2008,2010,2011,2013,2014,2016,2017,2019,2020,1333,2023,2026,2027,1217],{},"作用域插槽在",[1159,1997,1998],{},"组装渲染方法时","，生成的是一个",[1159,2001,2002],{},"包含注入作用域的方法","，相对于",[21,2005,2006],{},"createElement","生成",[21,2009,235],{},"，多了一层注入作用域方法包裹，这也就决定插槽",[21,2012,235],{},"作用域插槽是在子组件生成",[21,2015,235],{},"时生成，而具名插槽是在父组件创建",[21,2018,235],{},"时生成。",[21,2021,2022],{},"_u",[21,2024,2025],{},"resolveScopedSlots","，其作用为将节点配置项转换为",[21,2028,2029],{},"{scopedSlots: {slotName: fn}}",[2031,2032,2033],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":19,"searchDepth":34,"depth":34,"links":2035},[2036,2037],{"id":12,"depth":34,"text":12},{"id":204,"depth":34,"text":204,"children":2038},[2039,2040,2041,2042,2043,2044,2045],{"id":468,"depth":48,"text":468},{"id":645,"depth":48,"text":645},{"id":802,"depth":48,"text":803},{"id":1195,"depth":48,"text":1195},{"id":1220,"depth":48,"text":1220},{"id":1322,"depth":48,"text":1322},{"id":1766,"depth":48,"text":1766},"md",{},"\u002Fvue\u002Fvue的插槽和原理",{"description":19},"Vue\u002FVue的插槽和原理","CjnpVIH30kl_Wfc8RwRY6Uwbh7tXgWQ-5nyxaRM97vo",1791042471244]