[{"data":1,"prerenderedAt":5179},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue中组件间通信的方式":3},{"id":4,"title":5,"body":6,"description":5172,"extension":5173,"meta":5174,"navigation":126,"path":5175,"seo":5176,"stem":5177,"__hash__":5178},"content\u002FVue\u002FVue中组件间通信的方式.md","Vue中组件间通信的方式",{"type":7,"value":8,"toc":5156},"minimark",[9,13,21,26,68,72,78,348,556,559,562,774,1035,1038,1060,1252,1255,1276,1484,1780,1784,1831,2010,2208,2212,2283,2498,2769,3038,3042,3104,3302,3521,3525,3550,3711,3934,3938,3964,4186,4479,4764,4767,4798,4829,4835,4856,4878,4967,4983,5133,5136,5144,5147,5153],[10,11,5],"h1",{"id":12},"vue中组件间通信的方式",[14,15,16,20],"p",{},[17,18,19],"code",{},"Vue","中组件间通信包括父子组件、兄弟组件、跨级组件、非嵌套组件之间通信。",[22,23,25],"h2",{"id":24},"props-emit","props $emit",[14,27,28,30,31,34,35,37,38,40,41,43,44,46,47,49,50,52,53,56,57,60,61,64,65,67],{},[17,29,25],{},"适用于父子组件的通信，这种组件通信的方式是我们运用的非常多的一种，",[17,32,33],{},"props","以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通过",[17,36,33],{},"由父组件流向子组件，而子组件并不能通过修改",[17,39,33],{},"传过来的数据修改父组件的相应状态，所有的",[17,42,33],{},"都使得其父子",[17,45,33],{},"之间形成了一个单向下行绑定，父级",[17,48,33],{},"的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外改变父级组件的状态，导致难以理解数据的流向而提高了项目维护难度。实际上如果传入一个基本数据类型给子组件，在子组件中修改这个值的话",[17,51,19],{},"中会出现警告，如果对于子组件传入一个引用类型的对象的话，在子组件中修改是不会出现任何提示的，但这两种情况都属于改变了父子组件的单向数据流，是不符合可维护的设计方式的。",[54,55],"br",{},"\n正因为这个特性，而我们会有需要更改父组件值的需求，就有了对应的",[17,58,59],{},"$emit","，当我们在组件上定义了自定义事件，事件就可以由",[17,62,63],{},"vm.$emit","触发，回调函数会接收所有传入事件触发函数的额外参数，",[17,66,59],{},"实际上就是是用来触发当前实例上的事件，对此我们可以在父组件自定义一个处理接受变化状态的逻辑，然后在子组件中如若相关的状态改变时，就触发父组件的逻辑处理事件。",[69,70,71],"h3",{"id":71},"父组件向子组件传值",[14,73,74,75,77],{},"父组件向子组件传值通过",[17,76,33],{},"传递值即可。",[79,80,85],"pre",{"className":81,"code":82,"language":83,"meta":84,"style":84},"language-html shiki shiki-themes github-light github-dark","\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>我是子组件，接收：{{ msg }}\u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        components: {},\n        props: [\"msg\"],\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n\n","html","",[17,86,87,96,110,121,128,143,148,158,168,173,183,196,209,215,227,243,249,255,270,282,288,294,300,306,315,320,333,339],{"__ignoreMap":84},[88,89,92],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sJ8bj","\u003C!-- 子组件 -->\n",[88,97,99,103,107],{"class":90,"line":98},2,[88,100,102],{"class":101},"sVt8B","\u003C",[88,104,106],{"class":105},"s9eBZ","template",[88,108,109],{"class":101},">\n",[88,111,113,116,119],{"class":90,"line":112},3,[88,114,115],{"class":101},"    \u003C",[88,117,118],{"class":105},"div",[88,120,109],{"class":101},[88,122,124],{"class":90,"line":123},4,[88,125,127],{"emptyLinePlaceholder":126},true,"\n",[88,129,131,134,136,139,141],{"class":90,"line":130},5,[88,132,133],{"class":101},"        \u003C",[88,135,118],{"class":105},[88,137,138],{"class":101},">我是子组件，接收：{{ msg }}\u003C\u002F",[88,140,118],{"class":105},[88,142,109],{"class":101},[88,144,146],{"class":90,"line":145},6,[88,147,127],{"emptyLinePlaceholder":126},[88,149,151,154,156],{"class":90,"line":150},7,[88,152,153],{"class":101},"    \u003C\u002F",[88,155,118],{"class":105},[88,157,109],{"class":101},[88,159,161,164,166],{"class":90,"line":160},8,[88,162,163],{"class":101},"\u003C\u002F",[88,165,106],{"class":105},[88,167,109],{"class":101},[88,169,171],{"class":90,"line":170},9,[88,172,127],{"emptyLinePlaceholder":126},[88,174,176,178,181],{"class":90,"line":175},10,[88,177,102],{"class":101},[88,179,180],{"class":105},"script",[88,182,109],{"class":101},[88,184,186,190,193],{"class":90,"line":185},11,[88,187,189],{"class":188},"szBVR","    export",[88,191,192],{"class":188}," default",[88,194,195],{"class":101}," {\n",[88,197,199,202,206],{"class":90,"line":198},12,[88,200,201],{"class":101},"        name: ",[88,203,205],{"class":204},"sZZnC","\"child\"",[88,207,208],{"class":101},",\n",[88,210,212],{"class":90,"line":211},13,[88,213,214],{"class":101},"        components: {},\n",[88,216,218,221,224],{"class":90,"line":217},14,[88,219,220],{"class":101},"        props: [",[88,222,223],{"class":204},"\"msg\"",[88,225,226],{"class":101},"],\n",[88,228,230,234,237,240],{"class":90,"line":229},15,[88,231,233],{"class":232},"sScJk","        data",[88,235,236],{"class":101},": () ",[88,238,239],{"class":188},"=>",[88,241,242],{"class":101}," ({\n",[88,244,246],{"class":90,"line":245},16,[88,247,248],{"class":101},"            \n",[88,250,252],{"class":90,"line":251},17,[88,253,254],{"class":101},"        }),\n",[88,256,258,261,264,267],{"class":90,"line":257},18,[88,259,260],{"class":232},"        beforeCreate",[88,262,263],{"class":101},": ",[88,265,266],{"class":188},"function",[88,268,269],{"class":101},"() {},\n",[88,271,273,276,278,280],{"class":90,"line":272},19,[88,274,275],{"class":232},"        created",[88,277,263],{"class":101},[88,279,266],{"class":188},[88,281,269],{"class":101},[88,283,285],{"class":90,"line":284},20,[88,286,287],{"class":101},"        filters: {},\n",[88,289,291],{"class":90,"line":290},21,[88,292,293],{"class":101},"        computed: {},\n",[88,295,297],{"class":90,"line":296},22,[88,298,299],{"class":101},"        methods: {}\n",[88,301,303],{"class":90,"line":302},23,[88,304,305],{"class":101},"    }\n",[88,307,309,311,313],{"class":90,"line":308},24,[88,310,163],{"class":101},[88,312,180],{"class":105},[88,314,109],{"class":101},[88,316,318],{"class":90,"line":317},25,[88,319,127],{"emptyLinePlaceholder":126},[88,321,323,325,328,331],{"class":90,"line":322},26,[88,324,102],{"class":101},[88,326,327],{"class":105},"style",[88,329,330],{"class":232}," scoped",[88,332,109],{"class":101},[88,334,336],{"class":90,"line":335},27,[88,337,338],{"class":101}," \n",[88,340,342,344,346],{"class":90,"line":341},28,[88,343,163],{"class":101},[88,345,327],{"class":105},[88,347,109],{"class":101},[79,349,351],{"className":81,"code":350,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild :msg=\"msg\">\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg: \"父组件 Msg\"\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n\n",[17,352,353,358,366,374,378,401,405,413,421,425,433,450,458,463,473,481,485,495,505,509,513,517,521,529,533,543,548],{"__ignoreMap":84},[88,354,355],{"class":90,"line":91},[88,356,357],{"class":94},"\u003C!-- 父组件 -->\n",[88,359,360,362,364],{"class":90,"line":98},[88,361,102],{"class":101},[88,363,106],{"class":105},[88,365,109],{"class":101},[88,367,368,370,372],{"class":90,"line":112},[88,369,115],{"class":101},[88,371,118],{"class":105},[88,373,109],{"class":101},[88,375,376],{"class":90,"line":123},[88,377,127],{"emptyLinePlaceholder":126},[88,379,380,382,386,389,392,394,397,399],{"class":90,"line":130},[88,381,133],{"class":101},[88,383,385],{"class":384},"s7hpK","child",[88,387,388],{"class":232}," :msg",[88,390,391],{"class":101},"=",[88,393,223],{"class":204},[88,395,396],{"class":101},">\u003C\u002F",[88,398,385],{"class":384},[88,400,109],{"class":101},[88,402,403],{"class":90,"line":145},[88,404,127],{"emptyLinePlaceholder":126},[88,406,407,409,411],{"class":90,"line":150},[88,408,153],{"class":101},[88,410,118],{"class":105},[88,412,109],{"class":101},[88,414,415,417,419],{"class":90,"line":160},[88,416,163],{"class":101},[88,418,106],{"class":105},[88,420,109],{"class":101},[88,422,423],{"class":90,"line":170},[88,424,127],{"emptyLinePlaceholder":126},[88,426,427,429,431],{"class":90,"line":175},[88,428,102],{"class":101},[88,430,180],{"class":105},[88,432,109],{"class":101},[88,434,435,438,441,444,447],{"class":90,"line":185},[88,436,437],{"class":188},"    import",[88,439,440],{"class":101}," child ",[88,442,443],{"class":188},"from",[88,445,446],{"class":204}," \".\u002Fchild\"",[88,448,449],{"class":101},";\n",[88,451,452,454,456],{"class":90,"line":198},[88,453,189],{"class":188},[88,455,192],{"class":188},[88,457,195],{"class":101},[88,459,460],{"class":90,"line":211},[88,461,462],{"class":101},"        components: { child },\n",[88,464,465,467,469,471],{"class":90,"line":217},[88,466,233],{"class":232},[88,468,236],{"class":101},[88,470,239],{"class":188},[88,472,242],{"class":101},[88,474,475,478],{"class":90,"line":229},[88,476,477],{"class":101},"            msg: ",[88,479,480],{"class":204},"\"父组件 Msg\"\n",[88,482,483],{"class":90,"line":245},[88,484,254],{"class":101},[88,486,487,489,491,493],{"class":90,"line":251},[88,488,260],{"class":232},[88,490,263],{"class":101},[88,492,266],{"class":188},[88,494,269],{"class":101},[88,496,497,499,501,503],{"class":90,"line":257},[88,498,275],{"class":232},[88,500,263],{"class":101},[88,502,266],{"class":188},[88,504,269],{"class":101},[88,506,507],{"class":90,"line":272},[88,508,287],{"class":101},[88,510,511],{"class":90,"line":284},[88,512,293],{"class":101},[88,514,515],{"class":90,"line":290},[88,516,299],{"class":101},[88,518,519],{"class":90,"line":296},[88,520,305],{"class":101},[88,522,523,525,527],{"class":90,"line":302},[88,524,163],{"class":101},[88,526,180],{"class":105},[88,528,109],{"class":101},[88,530,531],{"class":90,"line":308},[88,532,127],{"emptyLinePlaceholder":126},[88,534,535,537,539,541],{"class":90,"line":317},[88,536,102],{"class":101},[88,538,327],{"class":105},[88,540,330],{"class":232},[88,542,109],{"class":101},[88,544,545],{"class":90,"line":322},[88,546,547],{"class":101},"    \n",[88,549,550,552,554],{"class":90,"line":335},[88,551,163],{"class":101},[88,553,327],{"class":105},[88,555,109],{"class":101},[69,557,558],{"id":558},"子组件向父组件传值",[14,560,561],{},"子组件向父组件传值需要通过事件的触发，将更改值的行为传递到父组件去执行。",[79,563,565],{"className":81,"code":564,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>我是子组件，接收：{{ msg }}\u003C\u002Fdiv>\n        \u003Cbutton @click=\"$emit('changeMsg', '子组件传值 Msg')\">触发事件并传递值到父组件\u003C\u002Fbutton>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        components: {},\n        props: [\"msg\"],\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,566,567,571,579,587,591,603,625,629,637,645,649,657,665,673,677,685,695,699,703,713,723,727,731,735,739,747,751,761,765],{"__ignoreMap":84},[88,568,569],{"class":90,"line":91},[88,570,95],{"class":94},[88,572,573,575,577],{"class":90,"line":98},[88,574,102],{"class":101},[88,576,106],{"class":105},[88,578,109],{"class":101},[88,580,581,583,585],{"class":90,"line":112},[88,582,115],{"class":101},[88,584,118],{"class":105},[88,586,109],{"class":101},[88,588,589],{"class":90,"line":123},[88,590,127],{"emptyLinePlaceholder":126},[88,592,593,595,597,599,601],{"class":90,"line":130},[88,594,133],{"class":101},[88,596,118],{"class":105},[88,598,138],{"class":101},[88,600,118],{"class":105},[88,602,109],{"class":101},[88,604,605,607,610,613,615,618,621,623],{"class":90,"line":145},[88,606,133],{"class":101},[88,608,609],{"class":105},"button",[88,611,612],{"class":232}," @click",[88,614,391],{"class":101},[88,616,617],{"class":204},"\"$emit('changeMsg', '子组件传值 Msg')\"",[88,619,620],{"class":101},">触发事件并传递值到父组件\u003C\u002F",[88,622,609],{"class":105},[88,624,109],{"class":101},[88,626,627],{"class":90,"line":150},[88,628,127],{"emptyLinePlaceholder":126},[88,630,631,633,635],{"class":90,"line":160},[88,632,153],{"class":101},[88,634,118],{"class":105},[88,636,109],{"class":101},[88,638,639,641,643],{"class":90,"line":170},[88,640,163],{"class":101},[88,642,106],{"class":105},[88,644,109],{"class":101},[88,646,647],{"class":90,"line":175},[88,648,127],{"emptyLinePlaceholder":126},[88,650,651,653,655],{"class":90,"line":185},[88,652,102],{"class":101},[88,654,180],{"class":105},[88,656,109],{"class":101},[88,658,659,661,663],{"class":90,"line":198},[88,660,189],{"class":188},[88,662,192],{"class":188},[88,664,195],{"class":101},[88,666,667,669,671],{"class":90,"line":211},[88,668,201],{"class":101},[88,670,205],{"class":204},[88,672,208],{"class":101},[88,674,675],{"class":90,"line":217},[88,676,214],{"class":101},[88,678,679,681,683],{"class":90,"line":229},[88,680,220],{"class":101},[88,682,223],{"class":204},[88,684,226],{"class":101},[88,686,687,689,691,693],{"class":90,"line":245},[88,688,233],{"class":232},[88,690,236],{"class":101},[88,692,239],{"class":188},[88,694,242],{"class":101},[88,696,697],{"class":90,"line":251},[88,698,248],{"class":101},[88,700,701],{"class":90,"line":257},[88,702,254],{"class":101},[88,704,705,707,709,711],{"class":90,"line":272},[88,706,260],{"class":232},[88,708,263],{"class":101},[88,710,266],{"class":188},[88,712,269],{"class":101},[88,714,715,717,719,721],{"class":90,"line":284},[88,716,275],{"class":232},[88,718,263],{"class":101},[88,720,266],{"class":188},[88,722,269],{"class":101},[88,724,725],{"class":90,"line":290},[88,726,287],{"class":101},[88,728,729],{"class":90,"line":296},[88,730,293],{"class":101},[88,732,733],{"class":90,"line":302},[88,734,299],{"class":101},[88,736,737],{"class":90,"line":308},[88,738,305],{"class":101},[88,740,741,743,745],{"class":90,"line":317},[88,742,163],{"class":101},[88,744,180],{"class":105},[88,746,109],{"class":101},[88,748,749],{"class":90,"line":322},[88,750,127],{"emptyLinePlaceholder":126},[88,752,753,755,757,759],{"class":90,"line":335},[88,754,102],{"class":101},[88,756,327],{"class":105},[88,758,330],{"class":232},[88,760,109],{"class":101},[88,762,763],{"class":90,"line":341},[88,764,338],{"class":101},[88,766,768,770,772],{"class":90,"line":767},29,[88,769,163],{"class":101},[88,771,327],{"class":105},[88,773,109],{"class":101},[79,775,777],{"className":81,"code":776,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild \n            :msg=\"msg\"\n            @changeMsg=\"changeMsg\"\n        >\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg: \"父组件 Msg\"\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {\n            changeMsg: function(msg){\n                this.msg = msg;\n            }\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,778,779,783,791,799,803,811,821,831,840,844,852,860,864,872,884,892,896,906,912,916,926,936,940,944,949,968,982,987,992,996,1005,1010,1021,1026],{"__ignoreMap":84},[88,780,781],{"class":90,"line":91},[88,782,357],{"class":94},[88,784,785,787,789],{"class":90,"line":98},[88,786,102],{"class":101},[88,788,106],{"class":105},[88,790,109],{"class":101},[88,792,793,795,797],{"class":90,"line":112},[88,794,115],{"class":101},[88,796,118],{"class":105},[88,798,109],{"class":101},[88,800,801],{"class":90,"line":123},[88,802,127],{"emptyLinePlaceholder":126},[88,804,805,807,809],{"class":90,"line":130},[88,806,133],{"class":101},[88,808,385],{"class":384},[88,810,338],{"class":101},[88,812,813,816,818],{"class":90,"line":145},[88,814,815],{"class":232},"            :msg",[88,817,391],{"class":101},[88,819,820],{"class":204},"\"msg\"\n",[88,822,823,826,828],{"class":90,"line":150},[88,824,825],{"class":232},"            @changeMsg",[88,827,391],{"class":101},[88,829,830],{"class":204},"\"changeMsg\"\n",[88,832,833,836,838],{"class":90,"line":160},[88,834,835],{"class":101},"        >\u003C\u002F",[88,837,385],{"class":384},[88,839,109],{"class":101},[88,841,842],{"class":90,"line":170},[88,843,127],{"emptyLinePlaceholder":126},[88,845,846,848,850],{"class":90,"line":175},[88,847,153],{"class":101},[88,849,118],{"class":105},[88,851,109],{"class":101},[88,853,854,856,858],{"class":90,"line":185},[88,855,163],{"class":101},[88,857,106],{"class":105},[88,859,109],{"class":101},[88,861,862],{"class":90,"line":198},[88,863,127],{"emptyLinePlaceholder":126},[88,865,866,868,870],{"class":90,"line":211},[88,867,102],{"class":101},[88,869,180],{"class":105},[88,871,109],{"class":101},[88,873,874,876,878,880,882],{"class":90,"line":217},[88,875,437],{"class":188},[88,877,440],{"class":101},[88,879,443],{"class":188},[88,881,446],{"class":204},[88,883,449],{"class":101},[88,885,886,888,890],{"class":90,"line":229},[88,887,189],{"class":188},[88,889,192],{"class":188},[88,891,195],{"class":101},[88,893,894],{"class":90,"line":245},[88,895,462],{"class":101},[88,897,898,900,902,904],{"class":90,"line":251},[88,899,233],{"class":232},[88,901,236],{"class":101},[88,903,239],{"class":188},[88,905,242],{"class":101},[88,907,908,910],{"class":90,"line":257},[88,909,477],{"class":101},[88,911,480],{"class":204},[88,913,914],{"class":90,"line":272},[88,915,254],{"class":101},[88,917,918,920,922,924],{"class":90,"line":284},[88,919,260],{"class":232},[88,921,263],{"class":101},[88,923,266],{"class":188},[88,925,269],{"class":101},[88,927,928,930,932,934],{"class":90,"line":290},[88,929,275],{"class":232},[88,931,263],{"class":101},[88,933,266],{"class":188},[88,935,269],{"class":101},[88,937,938],{"class":90,"line":296},[88,939,287],{"class":101},[88,941,942],{"class":90,"line":302},[88,943,293],{"class":101},[88,945,946],{"class":90,"line":308},[88,947,948],{"class":101},"        methods: {\n",[88,950,951,954,956,958,961,965],{"class":90,"line":317},[88,952,953],{"class":232},"            changeMsg",[88,955,263],{"class":101},[88,957,266],{"class":188},[88,959,960],{"class":101},"(",[88,962,964],{"class":963},"s4XuR","msg",[88,966,967],{"class":101},"){\n",[88,969,970,974,977,979],{"class":90,"line":322},[88,971,973],{"class":972},"sj4cs","                this",[88,975,976],{"class":101},".msg ",[88,978,391],{"class":188},[88,980,981],{"class":101}," msg;\n",[88,983,984],{"class":90,"line":335},[88,985,986],{"class":101},"            }\n",[88,988,989],{"class":90,"line":341},[88,990,991],{"class":101},"        }\n",[88,993,994],{"class":90,"line":767},[88,995,305],{"class":101},[88,997,999,1001,1003],{"class":90,"line":998},30,[88,1000,163],{"class":101},[88,1002,180],{"class":105},[88,1004,109],{"class":101},[88,1006,1008],{"class":90,"line":1007},31,[88,1009,127],{"emptyLinePlaceholder":126},[88,1011,1013,1015,1017,1019],{"class":90,"line":1012},32,[88,1014,102],{"class":101},[88,1016,327],{"class":105},[88,1018,330],{"class":232},[88,1020,109],{"class":101},[88,1022,1024],{"class":90,"line":1023},33,[88,1025,547],{"class":101},[88,1027,1029,1031,1033],{"class":90,"line":1028},34,[88,1030,163],{"class":101},[88,1032,327],{"class":105},[88,1034,109],{"class":101},[69,1036,1037],{"id":1037},"v-model",[14,1039,1040,1042,1043,1046,1047,1049,1050,1052,1053,1056,1057,1059],{},[17,1041,1037],{},"通常称为数据双向绑定，也可以称得上是一种父子组件间传值的方式，是当前组件与",[17,1044,1045],{},"input","等组件进行父子传值，其本质上就是一种语法糖，通过",[17,1048,33],{},"以及",[17,1051,1045],{},"(默认情况下)的事件的",[17,1054,1055],{},"event","中携带的值完成，我们可以自行实现一个",[17,1058,1037],{},"。",[79,1061,1063],{"className":81,"code":1062,"language":83,"meta":84,"style":84},"\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>{{msg}}\u003C\u002Fdiv>\n        \u003Cinput :value=\"msg\" @input=\"msg = $event.target.value\">\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        data: () => ({\n            msg: \"Msg\"\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,1064,1065,1073,1081,1085,1098,1121,1125,1133,1141,1145,1153,1161,1171,1178,1182,1192,1202,1206,1210,1214,1218,1226,1230,1240,1244],{"__ignoreMap":84},[88,1066,1067,1069,1071],{"class":90,"line":91},[88,1068,102],{"class":101},[88,1070,106],{"class":105},[88,1072,109],{"class":101},[88,1074,1075,1077,1079],{"class":90,"line":98},[88,1076,115],{"class":101},[88,1078,118],{"class":105},[88,1080,109],{"class":101},[88,1082,1083],{"class":90,"line":112},[88,1084,127],{"emptyLinePlaceholder":126},[88,1086,1087,1089,1091,1094,1096],{"class":90,"line":123},[88,1088,133],{"class":101},[88,1090,118],{"class":105},[88,1092,1093],{"class":101},">{{msg}}\u003C\u002F",[88,1095,118],{"class":105},[88,1097,109],{"class":101},[88,1099,1100,1102,1104,1107,1109,1111,1114,1116,1119],{"class":90,"line":130},[88,1101,133],{"class":101},[88,1103,1045],{"class":105},[88,1105,1106],{"class":232}," :value",[88,1108,391],{"class":101},[88,1110,223],{"class":204},[88,1112,1113],{"class":232}," @input",[88,1115,391],{"class":101},[88,1117,1118],{"class":204},"\"msg = $event.target.value\"",[88,1120,109],{"class":101},[88,1122,1123],{"class":90,"line":145},[88,1124,127],{"emptyLinePlaceholder":126},[88,1126,1127,1129,1131],{"class":90,"line":150},[88,1128,153],{"class":101},[88,1130,118],{"class":105},[88,1132,109],{"class":101},[88,1134,1135,1137,1139],{"class":90,"line":160},[88,1136,163],{"class":101},[88,1138,106],{"class":105},[88,1140,109],{"class":101},[88,1142,1143],{"class":90,"line":170},[88,1144,127],{"emptyLinePlaceholder":126},[88,1146,1147,1149,1151],{"class":90,"line":175},[88,1148,102],{"class":101},[88,1150,180],{"class":105},[88,1152,109],{"class":101},[88,1154,1155,1157,1159],{"class":90,"line":185},[88,1156,189],{"class":188},[88,1158,192],{"class":188},[88,1160,195],{"class":101},[88,1162,1163,1165,1167,1169],{"class":90,"line":198},[88,1164,233],{"class":232},[88,1166,236],{"class":101},[88,1168,239],{"class":188},[88,1170,242],{"class":101},[88,1172,1173,1175],{"class":90,"line":211},[88,1174,477],{"class":101},[88,1176,1177],{"class":204},"\"Msg\"\n",[88,1179,1180],{"class":90,"line":217},[88,1181,254],{"class":101},[88,1183,1184,1186,1188,1190],{"class":90,"line":229},[88,1185,260],{"class":232},[88,1187,263],{"class":101},[88,1189,266],{"class":188},[88,1191,269],{"class":101},[88,1193,1194,1196,1198,1200],{"class":90,"line":245},[88,1195,275],{"class":232},[88,1197,263],{"class":101},[88,1199,266],{"class":188},[88,1201,269],{"class":101},[88,1203,1204],{"class":90,"line":251},[88,1205,287],{"class":101},[88,1207,1208],{"class":90,"line":257},[88,1209,293],{"class":101},[88,1211,1212],{"class":90,"line":272},[88,1213,299],{"class":101},[88,1215,1216],{"class":90,"line":284},[88,1217,305],{"class":101},[88,1219,1220,1222,1224],{"class":90,"line":290},[88,1221,163],{"class":101},[88,1223,180],{"class":105},[88,1225,109],{"class":101},[88,1227,1228],{"class":90,"line":296},[88,1229,127],{"emptyLinePlaceholder":126},[88,1231,1232,1234,1236,1238],{"class":90,"line":302},[88,1233,102],{"class":101},[88,1235,327],{"class":105},[88,1237,330],{"class":232},[88,1239,109],{"class":101},[88,1241,1242],{"class":90,"line":308},[88,1243,547],{"class":101},[88,1245,1246,1248,1250],{"class":90,"line":317},[88,1247,163],{"class":101},[88,1249,327],{"class":105},[88,1251,109],{"class":101},[69,1253,1254],{"id":1254},"sync修饰符",[14,1256,1257,1260,1261,1264,1265,1268,1269,1272,1273,1275],{},[17,1258,1259],{},"sync","修饰符也可以称为一个语法糖，在",[17,1262,1263],{},"Vue 2.3","之后新的",[17,1266,1267],{},".sync","修饰符所实现的已经不再像",[17,1270,1271],{},"Vue 1.0","那样是真正的双向绑定，而是和",[17,1274,1037],{},"类似，是一种语法糖的形式，也可以称为一种缩写的形式，在下面父组件两种写法是完全等同的。",[79,1277,1279],{"className":81,"code":1278,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>我是子组件，接收：{{ msg }}\u003C\u002Fdiv>\n        \u003Cbutton @click=\"$emit('update:msg', '子组件传值 Msg')\">触发事件并传递值到父组件\u003C\u002Fbutton>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        components: {},\n        props: [\"msg\"],\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n\n",[17,1280,1281,1285,1293,1301,1305,1317,1336,1340,1348,1356,1360,1368,1376,1384,1388,1396,1406,1410,1414,1424,1434,1438,1442,1446,1450,1458,1462,1472,1476],{"__ignoreMap":84},[88,1282,1283],{"class":90,"line":91},[88,1284,95],{"class":94},[88,1286,1287,1289,1291],{"class":90,"line":98},[88,1288,102],{"class":101},[88,1290,106],{"class":105},[88,1292,109],{"class":101},[88,1294,1295,1297,1299],{"class":90,"line":112},[88,1296,115],{"class":101},[88,1298,118],{"class":105},[88,1300,109],{"class":101},[88,1302,1303],{"class":90,"line":123},[88,1304,127],{"emptyLinePlaceholder":126},[88,1306,1307,1309,1311,1313,1315],{"class":90,"line":130},[88,1308,133],{"class":101},[88,1310,118],{"class":105},[88,1312,138],{"class":101},[88,1314,118],{"class":105},[88,1316,109],{"class":101},[88,1318,1319,1321,1323,1325,1327,1330,1332,1334],{"class":90,"line":145},[88,1320,133],{"class":101},[88,1322,609],{"class":105},[88,1324,612],{"class":232},[88,1326,391],{"class":101},[88,1328,1329],{"class":204},"\"$emit('update:msg', '子组件传值 Msg')\"",[88,1331,620],{"class":101},[88,1333,609],{"class":105},[88,1335,109],{"class":101},[88,1337,1338],{"class":90,"line":150},[88,1339,127],{"emptyLinePlaceholder":126},[88,1341,1342,1344,1346],{"class":90,"line":160},[88,1343,153],{"class":101},[88,1345,118],{"class":105},[88,1347,109],{"class":101},[88,1349,1350,1352,1354],{"class":90,"line":170},[88,1351,163],{"class":101},[88,1353,106],{"class":105},[88,1355,109],{"class":101},[88,1357,1358],{"class":90,"line":175},[88,1359,127],{"emptyLinePlaceholder":126},[88,1361,1362,1364,1366],{"class":90,"line":185},[88,1363,102],{"class":101},[88,1365,180],{"class":105},[88,1367,109],{"class":101},[88,1369,1370,1372,1374],{"class":90,"line":198},[88,1371,189],{"class":188},[88,1373,192],{"class":188},[88,1375,195],{"class":101},[88,1377,1378,1380,1382],{"class":90,"line":211},[88,1379,201],{"class":101},[88,1381,205],{"class":204},[88,1383,208],{"class":101},[88,1385,1386],{"class":90,"line":217},[88,1387,214],{"class":101},[88,1389,1390,1392,1394],{"class":90,"line":229},[88,1391,220],{"class":101},[88,1393,223],{"class":204},[88,1395,226],{"class":101},[88,1397,1398,1400,1402,1404],{"class":90,"line":245},[88,1399,233],{"class":232},[88,1401,236],{"class":101},[88,1403,239],{"class":188},[88,1405,242],{"class":101},[88,1407,1408],{"class":90,"line":251},[88,1409,248],{"class":101},[88,1411,1412],{"class":90,"line":257},[88,1413,254],{"class":101},[88,1415,1416,1418,1420,1422],{"class":90,"line":272},[88,1417,260],{"class":232},[88,1419,263],{"class":101},[88,1421,266],{"class":188},[88,1423,269],{"class":101},[88,1425,1426,1428,1430,1432],{"class":90,"line":284},[88,1427,275],{"class":232},[88,1429,263],{"class":101},[88,1431,266],{"class":188},[88,1433,269],{"class":101},[88,1435,1436],{"class":90,"line":290},[88,1437,287],{"class":101},[88,1439,1440],{"class":90,"line":296},[88,1441,293],{"class":101},[88,1443,1444],{"class":90,"line":302},[88,1445,299],{"class":101},[88,1447,1448],{"class":90,"line":308},[88,1449,305],{"class":101},[88,1451,1452,1454,1456],{"class":90,"line":317},[88,1453,163],{"class":101},[88,1455,180],{"class":105},[88,1457,109],{"class":101},[88,1459,1460],{"class":90,"line":322},[88,1461,127],{"emptyLinePlaceholder":126},[88,1463,1464,1466,1468,1470],{"class":90,"line":335},[88,1465,102],{"class":101},[88,1467,327],{"class":105},[88,1469,330],{"class":232},[88,1471,109],{"class":101},[88,1473,1474],{"class":90,"line":341},[88,1475,338],{"class":101},[88,1477,1478,1480,1482],{"class":90,"line":767},[88,1479,163],{"class":101},[88,1481,327],{"class":105},[88,1483,109],{"class":101},[79,1485,1487],{"className":81,"code":1486,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild \n            :msg=\"msg1\"\n            @update:msg=\"value => msg1 = value\"\n        >\u003C\u002Fchild>\n        \n        \u003Cchild\n            :msg.sync=\"msg2\"\n        >\u003C\u002Fchild>\n        \n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg1: \"父组件 Msg1\",\n            msg2: \"父组件 Msg2\",\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {\n            changeMsg: function(msg){\n                this.msg = msg;\n            }\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,1488,1489,1493,1501,1509,1513,1521,1530,1540,1548,1553,1560,1570,1578,1582,1586,1594,1602,1606,1614,1626,1634,1638,1648,1658,1668,1672,1682,1692,1696,1700,1704,1718,1728,1732,1736,1741,1750,1755,1766,1771],{"__ignoreMap":84},[88,1490,1491],{"class":90,"line":91},[88,1492,357],{"class":94},[88,1494,1495,1497,1499],{"class":90,"line":98},[88,1496,102],{"class":101},[88,1498,106],{"class":105},[88,1500,109],{"class":101},[88,1502,1503,1505,1507],{"class":90,"line":112},[88,1504,115],{"class":101},[88,1506,118],{"class":105},[88,1508,109],{"class":101},[88,1510,1511],{"class":90,"line":123},[88,1512,127],{"emptyLinePlaceholder":126},[88,1514,1515,1517,1519],{"class":90,"line":130},[88,1516,133],{"class":101},[88,1518,385],{"class":384},[88,1520,338],{"class":101},[88,1522,1523,1525,1527],{"class":90,"line":145},[88,1524,815],{"class":232},[88,1526,391],{"class":101},[88,1528,1529],{"class":204},"\"msg1\"\n",[88,1531,1532,1535,1537],{"class":90,"line":150},[88,1533,1534],{"class":232},"            @update:msg",[88,1536,391],{"class":101},[88,1538,1539],{"class":204},"\"value => msg1 = value\"\n",[88,1541,1542,1544,1546],{"class":90,"line":160},[88,1543,835],{"class":101},[88,1545,385],{"class":384},[88,1547,109],{"class":101},[88,1549,1550],{"class":90,"line":170},[88,1551,1552],{"class":101},"        \n",[88,1554,1555,1557],{"class":90,"line":175},[88,1556,133],{"class":101},[88,1558,1559],{"class":384},"child\n",[88,1561,1562,1565,1567],{"class":90,"line":185},[88,1563,1564],{"class":232},"            :msg.sync",[88,1566,391],{"class":101},[88,1568,1569],{"class":204},"\"msg2\"\n",[88,1571,1572,1574,1576],{"class":90,"line":198},[88,1573,835],{"class":101},[88,1575,385],{"class":384},[88,1577,109],{"class":101},[88,1579,1580],{"class":90,"line":211},[88,1581,1552],{"class":101},[88,1583,1584],{"class":90,"line":217},[88,1585,127],{"emptyLinePlaceholder":126},[88,1587,1588,1590,1592],{"class":90,"line":229},[88,1589,153],{"class":101},[88,1591,118],{"class":105},[88,1593,109],{"class":101},[88,1595,1596,1598,1600],{"class":90,"line":245},[88,1597,163],{"class":101},[88,1599,106],{"class":105},[88,1601,109],{"class":101},[88,1603,1604],{"class":90,"line":251},[88,1605,127],{"emptyLinePlaceholder":126},[88,1607,1608,1610,1612],{"class":90,"line":257},[88,1609,102],{"class":101},[88,1611,180],{"class":105},[88,1613,109],{"class":101},[88,1615,1616,1618,1620,1622,1624],{"class":90,"line":272},[88,1617,437],{"class":188},[88,1619,440],{"class":101},[88,1621,443],{"class":188},[88,1623,446],{"class":204},[88,1625,449],{"class":101},[88,1627,1628,1630,1632],{"class":90,"line":284},[88,1629,189],{"class":188},[88,1631,192],{"class":188},[88,1633,195],{"class":101},[88,1635,1636],{"class":90,"line":290},[88,1637,462],{"class":101},[88,1639,1640,1642,1644,1646],{"class":90,"line":296},[88,1641,233],{"class":232},[88,1643,236],{"class":101},[88,1645,239],{"class":188},[88,1647,242],{"class":101},[88,1649,1650,1653,1656],{"class":90,"line":302},[88,1651,1652],{"class":101},"            msg1: ",[88,1654,1655],{"class":204},"\"父组件 Msg1\"",[88,1657,208],{"class":101},[88,1659,1660,1663,1666],{"class":90,"line":308},[88,1661,1662],{"class":101},"            msg2: ",[88,1664,1665],{"class":204},"\"父组件 Msg2\"",[88,1667,208],{"class":101},[88,1669,1670],{"class":90,"line":317},[88,1671,254],{"class":101},[88,1673,1674,1676,1678,1680],{"class":90,"line":322},[88,1675,260],{"class":232},[88,1677,263],{"class":101},[88,1679,266],{"class":188},[88,1681,269],{"class":101},[88,1683,1684,1686,1688,1690],{"class":90,"line":335},[88,1685,275],{"class":232},[88,1687,263],{"class":101},[88,1689,266],{"class":188},[88,1691,269],{"class":101},[88,1693,1694],{"class":90,"line":341},[88,1695,287],{"class":101},[88,1697,1698],{"class":90,"line":767},[88,1699,293],{"class":101},[88,1701,1702],{"class":90,"line":998},[88,1703,948],{"class":101},[88,1705,1706,1708,1710,1712,1714,1716],{"class":90,"line":1007},[88,1707,953],{"class":232},[88,1709,263],{"class":101},[88,1711,266],{"class":188},[88,1713,960],{"class":101},[88,1715,964],{"class":963},[88,1717,967],{"class":101},[88,1719,1720,1722,1724,1726],{"class":90,"line":1012},[88,1721,973],{"class":972},[88,1723,976],{"class":101},[88,1725,391],{"class":188},[88,1727,981],{"class":101},[88,1729,1730],{"class":90,"line":1023},[88,1731,986],{"class":101},[88,1733,1734],{"class":90,"line":1028},[88,1735,991],{"class":101},[88,1737,1739],{"class":90,"line":1738},35,[88,1740,305],{"class":101},[88,1742,1744,1746,1748],{"class":90,"line":1743},36,[88,1745,163],{"class":101},[88,1747,180],{"class":105},[88,1749,109],{"class":101},[88,1751,1753],{"class":90,"line":1752},37,[88,1754,127],{"emptyLinePlaceholder":126},[88,1756,1758,1760,1762,1764],{"class":90,"line":1757},38,[88,1759,102],{"class":101},[88,1761,327],{"class":105},[88,1763,330],{"class":232},[88,1765,109],{"class":101},[88,1767,1769],{"class":90,"line":1768},39,[88,1770,547],{"class":101},[88,1772,1774,1776,1778],{"class":90,"line":1773},40,[88,1775,163],{"class":101},[88,1777,327],{"class":105},[88,1779,109],{"class":101},[22,1781,1783],{"id":1782},"provide-inject","provide inject",[14,1785,1786,1788,1789,1792,1793,1796,1797,1800,1801,1804,1805,1807,1808,1810,1811,1813,1814,1817,1818,1820,1821,1823,1824,1826,1827,1830],{},[17,1787,1783],{},"适用于父子组件以及跨级组件的通信，类似于",[17,1790,1791],{},"React","的",[17,1794,1795],{},"Context API","，在父组件中通过",[17,1798,1799],{},"provider","来提供属性，然后在子组件中通过",[17,1802,1803],{},"inject","来注入变量，不论子组件有多深，只要调用了",[17,1806,1803],{},"那么就可以注入在",[17,1809,1799],{},"中提供的数据，而不是局限于只能从当前父组件的",[17,1812,33],{},"属性来获取数据，只要在父组件内定义的",[17,1815,1816],{},"provide","的数据，子组件都可以调用。当然",[17,1819,19],{},"中注明了",[17,1822,1816],{},"和",[17,1825,1803],{},"主要在开发高阶插件",[17,1828,1829],{},"\u002F","组件库时使用，并不推荐用于普通应用程序代码中。",[79,1832,1834],{"className":81,"code":1833,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003Cdiv>inject: {{msg}}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        inject: [\"msg\"],\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,1835,1836,1840,1848,1856,1869,1877,1885,1889,1897,1905,1913,1922,1932,1936,1940,1950,1960,1964,1968,1972,1976,1984,1988,1998,2002],{"__ignoreMap":84},[88,1837,1838],{"class":90,"line":91},[88,1839,95],{"class":94},[88,1841,1842,1844,1846],{"class":90,"line":98},[88,1843,102],{"class":101},[88,1845,106],{"class":105},[88,1847,109],{"class":101},[88,1849,1850,1852,1854],{"class":90,"line":112},[88,1851,115],{"class":101},[88,1853,118],{"class":105},[88,1855,109],{"class":101},[88,1857,1858,1860,1862,1865,1867],{"class":90,"line":123},[88,1859,133],{"class":101},[88,1861,118],{"class":105},[88,1863,1864],{"class":101},">inject: {{msg}}\u003C\u002F",[88,1866,118],{"class":105},[88,1868,109],{"class":101},[88,1870,1871,1873,1875],{"class":90,"line":130},[88,1872,153],{"class":101},[88,1874,118],{"class":105},[88,1876,109],{"class":101},[88,1878,1879,1881,1883],{"class":90,"line":145},[88,1880,163],{"class":101},[88,1882,106],{"class":105},[88,1884,109],{"class":101},[88,1886,1887],{"class":90,"line":150},[88,1888,127],{"emptyLinePlaceholder":126},[88,1890,1891,1893,1895],{"class":90,"line":160},[88,1892,102],{"class":101},[88,1894,180],{"class":105},[88,1896,109],{"class":101},[88,1898,1899,1901,1903],{"class":90,"line":170},[88,1900,189],{"class":188},[88,1902,192],{"class":188},[88,1904,195],{"class":101},[88,1906,1907,1909,1911],{"class":90,"line":175},[88,1908,201],{"class":101},[88,1910,205],{"class":204},[88,1912,208],{"class":101},[88,1914,1915,1918,1920],{"class":90,"line":185},[88,1916,1917],{"class":101},"        inject: [",[88,1919,223],{"class":204},[88,1921,226],{"class":101},[88,1923,1924,1926,1928,1930],{"class":90,"line":198},[88,1925,233],{"class":232},[88,1927,236],{"class":101},[88,1929,239],{"class":188},[88,1931,242],{"class":101},[88,1933,1934],{"class":90,"line":211},[88,1935,248],{"class":101},[88,1937,1938],{"class":90,"line":217},[88,1939,254],{"class":101},[88,1941,1942,1944,1946,1948],{"class":90,"line":229},[88,1943,260],{"class":232},[88,1945,263],{"class":101},[88,1947,266],{"class":188},[88,1949,269],{"class":101},[88,1951,1952,1954,1956,1958],{"class":90,"line":245},[88,1953,275],{"class":232},[88,1955,263],{"class":101},[88,1957,266],{"class":188},[88,1959,269],{"class":101},[88,1961,1962],{"class":90,"line":251},[88,1963,287],{"class":101},[88,1965,1966],{"class":90,"line":257},[88,1967,293],{"class":101},[88,1969,1970],{"class":90,"line":272},[88,1971,299],{"class":101},[88,1973,1974],{"class":90,"line":284},[88,1975,305],{"class":101},[88,1977,1978,1980,1982],{"class":90,"line":290},[88,1979,163],{"class":101},[88,1981,180],{"class":105},[88,1983,109],{"class":101},[88,1985,1986],{"class":90,"line":296},[88,1987,127],{"emptyLinePlaceholder":126},[88,1989,1990,1992,1994,1996],{"class":90,"line":302},[88,1991,102],{"class":101},[88,1993,327],{"class":105},[88,1995,330],{"class":232},[88,1997,109],{"class":101},[88,1999,2000],{"class":90,"line":308},[88,2001,338],{"class":101},[88,2003,2004,2006,2008],{"class":90,"line":317},[88,2005,163],{"class":101},[88,2007,327],{"class":105},[88,2009,109],{"class":101},[79,2011,2013],{"className":81,"code":2012,"language":83,"meta":84,"style":84},"\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild>\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n\n        }),\n        provide: {\n            msg: \"provide msg\"\n        },\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,2014,2015,2023,2031,2035,2047,2051,2059,2067,2071,2079,2091,2099,2103,2113,2117,2121,2126,2133,2138,2148,2158,2162,2166,2170,2174,2182,2186,2196,2200],{"__ignoreMap":84},[88,2016,2017,2019,2021],{"class":90,"line":91},[88,2018,102],{"class":101},[88,2020,106],{"class":105},[88,2022,109],{"class":101},[88,2024,2025,2027,2029],{"class":90,"line":98},[88,2026,115],{"class":101},[88,2028,118],{"class":105},[88,2030,109],{"class":101},[88,2032,2033],{"class":90,"line":112},[88,2034,127],{"emptyLinePlaceholder":126},[88,2036,2037,2039,2041,2043,2045],{"class":90,"line":123},[88,2038,133],{"class":101},[88,2040,385],{"class":384},[88,2042,396],{"class":101},[88,2044,385],{"class":384},[88,2046,109],{"class":101},[88,2048,2049],{"class":90,"line":130},[88,2050,127],{"emptyLinePlaceholder":126},[88,2052,2053,2055,2057],{"class":90,"line":145},[88,2054,153],{"class":101},[88,2056,118],{"class":105},[88,2058,109],{"class":101},[88,2060,2061,2063,2065],{"class":90,"line":150},[88,2062,163],{"class":101},[88,2064,106],{"class":105},[88,2066,109],{"class":101},[88,2068,2069],{"class":90,"line":160},[88,2070,127],{"emptyLinePlaceholder":126},[88,2072,2073,2075,2077],{"class":90,"line":170},[88,2074,102],{"class":101},[88,2076,180],{"class":105},[88,2078,109],{"class":101},[88,2080,2081,2083,2085,2087,2089],{"class":90,"line":175},[88,2082,437],{"class":188},[88,2084,440],{"class":101},[88,2086,443],{"class":188},[88,2088,446],{"class":204},[88,2090,449],{"class":101},[88,2092,2093,2095,2097],{"class":90,"line":185},[88,2094,189],{"class":188},[88,2096,192],{"class":188},[88,2098,195],{"class":101},[88,2100,2101],{"class":90,"line":198},[88,2102,462],{"class":101},[88,2104,2105,2107,2109,2111],{"class":90,"line":211},[88,2106,233],{"class":232},[88,2108,236],{"class":101},[88,2110,239],{"class":188},[88,2112,242],{"class":101},[88,2114,2115],{"class":90,"line":217},[88,2116,127],{"emptyLinePlaceholder":126},[88,2118,2119],{"class":90,"line":229},[88,2120,254],{"class":101},[88,2122,2123],{"class":90,"line":245},[88,2124,2125],{"class":101},"        provide: {\n",[88,2127,2128,2130],{"class":90,"line":251},[88,2129,477],{"class":101},[88,2131,2132],{"class":204},"\"provide msg\"\n",[88,2134,2135],{"class":90,"line":257},[88,2136,2137],{"class":101},"        },\n",[88,2139,2140,2142,2144,2146],{"class":90,"line":272},[88,2141,260],{"class":232},[88,2143,263],{"class":101},[88,2145,266],{"class":188},[88,2147,269],{"class":101},[88,2149,2150,2152,2154,2156],{"class":90,"line":284},[88,2151,275],{"class":232},[88,2153,263],{"class":101},[88,2155,266],{"class":188},[88,2157,269],{"class":101},[88,2159,2160],{"class":90,"line":290},[88,2161,287],{"class":101},[88,2163,2164],{"class":90,"line":296},[88,2165,293],{"class":101},[88,2167,2168],{"class":90,"line":302},[88,2169,299],{"class":101},[88,2171,2172],{"class":90,"line":308},[88,2173,305],{"class":101},[88,2175,2176,2178,2180],{"class":90,"line":317},[88,2177,163],{"class":101},[88,2179,180],{"class":105},[88,2181,109],{"class":101},[88,2183,2184],{"class":90,"line":322},[88,2185,127],{"emptyLinePlaceholder":126},[88,2187,2188,2190,2192,2194],{"class":90,"line":335},[88,2189,102],{"class":101},[88,2191,327],{"class":105},[88,2193,330],{"class":232},[88,2195,109],{"class":101},[88,2197,2198],{"class":90,"line":341},[88,2199,547],{"class":101},[88,2201,2202,2204,2206],{"class":90,"line":767},[88,2203,163],{"class":101},[88,2205,327],{"class":105},[88,2207,109],{"class":101},[22,2209,2211],{"id":2210},"attrs-listeners","$attrs $listeners",[14,2213,2214,2216,2217,2219,2220,2223,2224,2223,2227,2230,2231,2233,2234,2230,2236,2233,2238,2240,2241,2243,2244,2246,2247,2249,2250,2252,2253,2255,2256,2258,2259,2261,2262,2252,2264,2266,2267,2270,2271,1823,2274,2277,2278,2280,2281,1059],{},[17,2215,2211],{},"适用于直接的父子组件通信并通过",[17,2218,33],{},"传递可以实现跨级组件的通信，假设此时我们有三个组件分别为",[17,2221,2222],{},"A","、",[17,2225,2226],{},"B",[17,2228,2229],{},"C","，父组件",[17,2232,2222],{},"下面有子组件",[17,2235,2226],{},[17,2237,2226],{},[17,2239,2229],{},"，这时如果组件",[17,2242,2222],{},"直接想传递数据给组件",[17,2245,2229],{},"那就不能直接传递了，只能是组件",[17,2248,2222],{},"通过",[17,2251,33],{},"将数据传给组件",[17,2254,2226],{},"，然后组件",[17,2257,2226],{},"获取到组件",[17,2260,2222],{},"传递过来的数据后再通过",[17,2263,33],{},[17,2265,2229],{},"，当然这种方式是非常复杂的，无关组件中的逻辑业务增多了，代码维护也没变得困难，再加上如果嵌套的层级越多逻辑也复杂，无关代码越多，针对这样一个问题，",[17,2268,2269],{},"Vue 2.4","提供了",[17,2272,2273],{},"$attrs",[17,2275,2276],{},"$listeners","来实现能够直接让组件",[17,2279,2222],{},"直接传递消息给组件",[17,2282,2229],{},[79,2284,2286],{"className":81,"code":2285,"language":83,"meta":84,"style":84},"\u003C!-- 子子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child-child\",\n        components: {},\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {\n            console.log(this.$attrs); \u002F\u002F {param: 1, test: 2}\n            console.log(this.$listeners); \u002F\u002F {testEvent: ƒ}\n        },\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,2287,2288,2293,2301,2309,2313,2317,2321,2329,2337,2341,2349,2357,2366,2370,2380,2384,2388,2398,2409,2428,2444,2448,2452,2456,2460,2464,2472,2476,2486,2490],{"__ignoreMap":84},[88,2289,2290],{"class":90,"line":91},[88,2291,2292],{"class":94},"\u003C!-- 子子组件 -->\n",[88,2294,2295,2297,2299],{"class":90,"line":98},[88,2296,102],{"class":101},[88,2298,106],{"class":105},[88,2300,109],{"class":101},[88,2302,2303,2305,2307],{"class":90,"line":112},[88,2304,115],{"class":101},[88,2306,118],{"class":105},[88,2308,109],{"class":101},[88,2310,2311],{"class":90,"line":123},[88,2312,127],{"emptyLinePlaceholder":126},[88,2314,2315],{"class":90,"line":130},[88,2316,1552],{"class":101},[88,2318,2319],{"class":90,"line":145},[88,2320,127],{"emptyLinePlaceholder":126},[88,2322,2323,2325,2327],{"class":90,"line":150},[88,2324,153],{"class":101},[88,2326,118],{"class":105},[88,2328,109],{"class":101},[88,2330,2331,2333,2335],{"class":90,"line":160},[88,2332,163],{"class":101},[88,2334,106],{"class":105},[88,2336,109],{"class":101},[88,2338,2339],{"class":90,"line":170},[88,2340,127],{"emptyLinePlaceholder":126},[88,2342,2343,2345,2347],{"class":90,"line":175},[88,2344,102],{"class":101},[88,2346,180],{"class":105},[88,2348,109],{"class":101},[88,2350,2351,2353,2355],{"class":90,"line":185},[88,2352,189],{"class":188},[88,2354,192],{"class":188},[88,2356,195],{"class":101},[88,2358,2359,2361,2364],{"class":90,"line":198},[88,2360,201],{"class":101},[88,2362,2363],{"class":204},"\"child-child\"",[88,2365,208],{"class":101},[88,2367,2368],{"class":90,"line":211},[88,2369,214],{"class":101},[88,2371,2372,2374,2376,2378],{"class":90,"line":217},[88,2373,233],{"class":232},[88,2375,236],{"class":101},[88,2377,239],{"class":188},[88,2379,242],{"class":101},[88,2381,2382],{"class":90,"line":229},[88,2383,248],{"class":101},[88,2385,2386],{"class":90,"line":245},[88,2387,254],{"class":101},[88,2389,2390,2392,2394,2396],{"class":90,"line":251},[88,2391,260],{"class":232},[88,2393,263],{"class":101},[88,2395,266],{"class":188},[88,2397,269],{"class":101},[88,2399,2400,2402,2404,2406],{"class":90,"line":257},[88,2401,275],{"class":232},[88,2403,263],{"class":101},[88,2405,266],{"class":188},[88,2407,2408],{"class":101},"() {\n",[88,2410,2411,2414,2417,2419,2422,2425],{"class":90,"line":272},[88,2412,2413],{"class":101},"            console.",[88,2415,2416],{"class":232},"log",[88,2418,960],{"class":101},[88,2420,2421],{"class":972},"this",[88,2423,2424],{"class":101},".$attrs); ",[88,2426,2427],{"class":94},"\u002F\u002F {param: 1, test: 2}\n",[88,2429,2430,2432,2434,2436,2438,2441],{"class":90,"line":284},[88,2431,2413],{"class":101},[88,2433,2416],{"class":232},[88,2435,960],{"class":101},[88,2437,2421],{"class":972},[88,2439,2440],{"class":101},".$listeners); ",[88,2442,2443],{"class":94},"\u002F\u002F {testEvent: ƒ}\n",[88,2445,2446],{"class":90,"line":290},[88,2447,2137],{"class":101},[88,2449,2450],{"class":90,"line":296},[88,2451,287],{"class":101},[88,2453,2454],{"class":90,"line":302},[88,2455,293],{"class":101},[88,2457,2458],{"class":90,"line":308},[88,2459,299],{"class":101},[88,2461,2462],{"class":90,"line":317},[88,2463,305],{"class":101},[88,2465,2466,2468,2470],{"class":90,"line":322},[88,2467,163],{"class":101},[88,2469,180],{"class":105},[88,2471,109],{"class":101},[88,2473,2474],{"class":90,"line":335},[88,2475,127],{"emptyLinePlaceholder":126},[88,2477,2478,2480,2482,2484],{"class":90,"line":341},[88,2479,102],{"class":101},[88,2481,327],{"class":105},[88,2483,330],{"class":232},[88,2485,109],{"class":101},[88,2487,2488],{"class":90,"line":767},[88,2489,338],{"class":101},[88,2491,2492,2494,2496],{"class":90,"line":998},[88,2493,163],{"class":101},[88,2495,327],{"class":105},[88,2497,109],{"class":101},[79,2499,2501],{"className":81,"code":2500,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n        \u003C!-- 直接将剩余的参数传递给子组件 -->\n        \u003Cchild-child v-bind=\"$attrs\" v-on=\"$listeners\">\u003C\u002Fchild-child>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import childChild from \".\u002Fchild-child\";\n    export default {\n        name: \"child\",\n        components: { childChild },\n        props: [\"msg\"], \u002F\u002F 声明了接收名为msg的prop 此时在此组件的$attrs则不会再有msg参数\n        data: () => ({\n            \n        }),\n        inheritAttrs: false, \u002F\u002F 默认设置为true也可 \u002F\u002F 默认情况下true 父作用域的不被认作 props 的 attribute 绑定将会回退且作为普通的 HTML attribute 应用在子组件的根元素上。\n        beforeCreate: function() {},\n        created: function() {\n            console.log(this.$attrs); \u002F\u002F {param: 1, test: 2}\n            console.log(this.$listeners); \u002F\u002F {testEvent: ƒ}\n        },\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,2502,2503,2507,2515,2523,2528,2557,2565,2573,2577,2585,2599,2607,2615,2620,2632,2642,2646,2650,2667,2677,2687,2701,2715,2719,2723,2727,2731,2735,2743,2747,2757,2761],{"__ignoreMap":84},[88,2504,2505],{"class":90,"line":91},[88,2506,95],{"class":94},[88,2508,2509,2511,2513],{"class":90,"line":98},[88,2510,102],{"class":101},[88,2512,106],{"class":105},[88,2514,109],{"class":101},[88,2516,2517,2519,2521],{"class":90,"line":112},[88,2518,115],{"class":101},[88,2520,118],{"class":105},[88,2522,109],{"class":101},[88,2524,2525],{"class":90,"line":123},[88,2526,2527],{"class":94},"        \u003C!-- 直接将剩余的参数传递给子组件 -->\n",[88,2529,2530,2532,2535,2538,2540,2543,2546,2548,2551,2553,2555],{"class":90,"line":130},[88,2531,133],{"class":101},[88,2533,2534],{"class":105},"child-child",[88,2536,2537],{"class":232}," v-bind",[88,2539,391],{"class":101},[88,2541,2542],{"class":204},"\"$attrs\"",[88,2544,2545],{"class":232}," v-on",[88,2547,391],{"class":101},[88,2549,2550],{"class":204},"\"$listeners\"",[88,2552,396],{"class":101},[88,2554,2534],{"class":105},[88,2556,109],{"class":101},[88,2558,2559,2561,2563],{"class":90,"line":145},[88,2560,153],{"class":101},[88,2562,118],{"class":105},[88,2564,109],{"class":101},[88,2566,2567,2569,2571],{"class":90,"line":150},[88,2568,163],{"class":101},[88,2570,106],{"class":105},[88,2572,109],{"class":101},[88,2574,2575],{"class":90,"line":160},[88,2576,127],{"emptyLinePlaceholder":126},[88,2578,2579,2581,2583],{"class":90,"line":170},[88,2580,102],{"class":101},[88,2582,180],{"class":105},[88,2584,109],{"class":101},[88,2586,2587,2589,2592,2594,2597],{"class":90,"line":175},[88,2588,437],{"class":188},[88,2590,2591],{"class":101}," childChild ",[88,2593,443],{"class":188},[88,2595,2596],{"class":204}," \".\u002Fchild-child\"",[88,2598,449],{"class":101},[88,2600,2601,2603,2605],{"class":90,"line":185},[88,2602,189],{"class":188},[88,2604,192],{"class":188},[88,2606,195],{"class":101},[88,2608,2609,2611,2613],{"class":90,"line":198},[88,2610,201],{"class":101},[88,2612,205],{"class":204},[88,2614,208],{"class":101},[88,2616,2617],{"class":90,"line":211},[88,2618,2619],{"class":101},"        components: { childChild },\n",[88,2621,2622,2624,2626,2629],{"class":90,"line":217},[88,2623,220],{"class":101},[88,2625,223],{"class":204},[88,2627,2628],{"class":101},"], ",[88,2630,2631],{"class":94},"\u002F\u002F 声明了接收名为msg的prop 此时在此组件的$attrs则不会再有msg参数\n",[88,2633,2634,2636,2638,2640],{"class":90,"line":229},[88,2635,233],{"class":232},[88,2637,236],{"class":101},[88,2639,239],{"class":188},[88,2641,242],{"class":101},[88,2643,2644],{"class":90,"line":245},[88,2645,248],{"class":101},[88,2647,2648],{"class":90,"line":251},[88,2649,254],{"class":101},[88,2651,2652,2655,2658,2661,2664],{"class":90,"line":257},[88,2653,2654],{"class":101},"        inheritAttrs: ",[88,2656,2657],{"class":972},"false",[88,2659,2660],{"class":101},", ",[88,2662,2663],{"class":94},"\u002F\u002F 默认设置为true也可",[88,2665,2666],{"class":94}," \u002F\u002F 默认情况下true 父作用域的不被认作 props 的 attribute 绑定将会回退且作为普通的 HTML attribute 应用在子组件的根元素上。\n",[88,2668,2669,2671,2673,2675],{"class":90,"line":272},[88,2670,260],{"class":232},[88,2672,263],{"class":101},[88,2674,266],{"class":188},[88,2676,269],{"class":101},[88,2678,2679,2681,2683,2685],{"class":90,"line":284},[88,2680,275],{"class":232},[88,2682,263],{"class":101},[88,2684,266],{"class":188},[88,2686,2408],{"class":101},[88,2688,2689,2691,2693,2695,2697,2699],{"class":90,"line":290},[88,2690,2413],{"class":101},[88,2692,2416],{"class":232},[88,2694,960],{"class":101},[88,2696,2421],{"class":972},[88,2698,2424],{"class":101},[88,2700,2427],{"class":94},[88,2702,2703,2705,2707,2709,2711,2713],{"class":90,"line":296},[88,2704,2413],{"class":101},[88,2706,2416],{"class":232},[88,2708,960],{"class":101},[88,2710,2421],{"class":972},[88,2712,2440],{"class":101},[88,2714,2443],{"class":94},[88,2716,2717],{"class":90,"line":302},[88,2718,2137],{"class":101},[88,2720,2721],{"class":90,"line":308},[88,2722,287],{"class":101},[88,2724,2725],{"class":90,"line":317},[88,2726,293],{"class":101},[88,2728,2729],{"class":90,"line":322},[88,2730,299],{"class":101},[88,2732,2733],{"class":90,"line":335},[88,2734,305],{"class":101},[88,2736,2737,2739,2741],{"class":90,"line":341},[88,2738,163],{"class":101},[88,2740,180],{"class":105},[88,2742,109],{"class":101},[88,2744,2745],{"class":90,"line":767},[88,2746,127],{"emptyLinePlaceholder":126},[88,2748,2749,2751,2753,2755],{"class":90,"line":998},[88,2750,102],{"class":101},[88,2752,327],{"class":105},[88,2754,330],{"class":232},[88,2756,109],{"class":101},[88,2758,2759],{"class":90,"line":1007},[88,2760,338],{"class":101},[88,2762,2763,2765,2767],{"class":90,"line":1012},[88,2764,163],{"class":101},[88,2766,327],{"class":105},[88,2768,109],{"class":101},[79,2770,2772],{"className":81,"code":2771,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild \n            :msg=\"msg\"\n            :param=\"1\"\n            :test=\"2\"\n            @testEvent=\"tips\"\n        >\u003C\u002Fchild>\n        \n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg: \"Msg\",\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {\n            tips: function(...args){\n                console.log(args);\n            }\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,2773,2774,2778,2786,2794,2798,2806,2814,2824,2834,2844,2852,2856,2864,2872,2876,2884,2896,2904,2908,2918,2927,2931,2941,2951,2955,2959,2963,2982,2992,2996,3000,3004,3012,3016,3026,3030],{"__ignoreMap":84},[88,2775,2776],{"class":90,"line":91},[88,2777,357],{"class":94},[88,2779,2780,2782,2784],{"class":90,"line":98},[88,2781,102],{"class":101},[88,2783,106],{"class":105},[88,2785,109],{"class":101},[88,2787,2788,2790,2792],{"class":90,"line":112},[88,2789,115],{"class":101},[88,2791,118],{"class":105},[88,2793,109],{"class":101},[88,2795,2796],{"class":90,"line":123},[88,2797,127],{"emptyLinePlaceholder":126},[88,2799,2800,2802,2804],{"class":90,"line":130},[88,2801,133],{"class":101},[88,2803,385],{"class":384},[88,2805,338],{"class":101},[88,2807,2808,2810,2812],{"class":90,"line":145},[88,2809,815],{"class":232},[88,2811,391],{"class":101},[88,2813,820],{"class":204},[88,2815,2816,2819,2821],{"class":90,"line":150},[88,2817,2818],{"class":232},"            :param",[88,2820,391],{"class":101},[88,2822,2823],{"class":204},"\"1\"\n",[88,2825,2826,2829,2831],{"class":90,"line":160},[88,2827,2828],{"class":232},"            :test",[88,2830,391],{"class":101},[88,2832,2833],{"class":204},"\"2\"\n",[88,2835,2836,2839,2841],{"class":90,"line":170},[88,2837,2838],{"class":232},"            @testEvent",[88,2840,391],{"class":101},[88,2842,2843],{"class":204},"\"tips\"\n",[88,2845,2846,2848,2850],{"class":90,"line":175},[88,2847,835],{"class":101},[88,2849,385],{"class":384},[88,2851,109],{"class":101},[88,2853,2854],{"class":90,"line":185},[88,2855,1552],{"class":101},[88,2857,2858,2860,2862],{"class":90,"line":198},[88,2859,153],{"class":101},[88,2861,118],{"class":105},[88,2863,109],{"class":101},[88,2865,2866,2868,2870],{"class":90,"line":211},[88,2867,163],{"class":101},[88,2869,106],{"class":105},[88,2871,109],{"class":101},[88,2873,2874],{"class":90,"line":217},[88,2875,127],{"emptyLinePlaceholder":126},[88,2877,2878,2880,2882],{"class":90,"line":229},[88,2879,102],{"class":101},[88,2881,180],{"class":105},[88,2883,109],{"class":101},[88,2885,2886,2888,2890,2892,2894],{"class":90,"line":245},[88,2887,437],{"class":188},[88,2889,440],{"class":101},[88,2891,443],{"class":188},[88,2893,446],{"class":204},[88,2895,449],{"class":101},[88,2897,2898,2900,2902],{"class":90,"line":251},[88,2899,189],{"class":188},[88,2901,192],{"class":188},[88,2903,195],{"class":101},[88,2905,2906],{"class":90,"line":257},[88,2907,462],{"class":101},[88,2909,2910,2912,2914,2916],{"class":90,"line":272},[88,2911,233],{"class":232},[88,2913,236],{"class":101},[88,2915,239],{"class":188},[88,2917,242],{"class":101},[88,2919,2920,2922,2925],{"class":90,"line":284},[88,2921,477],{"class":101},[88,2923,2924],{"class":204},"\"Msg\"",[88,2926,208],{"class":101},[88,2928,2929],{"class":90,"line":290},[88,2930,254],{"class":101},[88,2932,2933,2935,2937,2939],{"class":90,"line":296},[88,2934,260],{"class":232},[88,2936,263],{"class":101},[88,2938,266],{"class":188},[88,2940,269],{"class":101},[88,2942,2943,2945,2947,2949],{"class":90,"line":302},[88,2944,275],{"class":232},[88,2946,263],{"class":101},[88,2948,266],{"class":188},[88,2950,269],{"class":101},[88,2952,2953],{"class":90,"line":308},[88,2954,287],{"class":101},[88,2956,2957],{"class":90,"line":317},[88,2958,293],{"class":101},[88,2960,2961],{"class":90,"line":322},[88,2962,948],{"class":101},[88,2964,2965,2968,2970,2972,2974,2977,2980],{"class":90,"line":335},[88,2966,2967],{"class":232},"            tips",[88,2969,263],{"class":101},[88,2971,266],{"class":188},[88,2973,960],{"class":101},[88,2975,2976],{"class":188},"...",[88,2978,2979],{"class":963},"args",[88,2981,967],{"class":101},[88,2983,2984,2987,2989],{"class":90,"line":341},[88,2985,2986],{"class":101},"                console.",[88,2988,2416],{"class":232},[88,2990,2991],{"class":101},"(args);\n",[88,2993,2994],{"class":90,"line":767},[88,2995,986],{"class":101},[88,2997,2998],{"class":90,"line":998},[88,2999,991],{"class":101},[88,3001,3002],{"class":90,"line":1007},[88,3003,305],{"class":101},[88,3005,3006,3008,3010],{"class":90,"line":1012},[88,3007,163],{"class":101},[88,3009,180],{"class":105},[88,3011,109],{"class":101},[88,3013,3014],{"class":90,"line":1023},[88,3015,127],{"emptyLinePlaceholder":126},[88,3017,3018,3020,3022,3024],{"class":90,"line":1028},[88,3019,102],{"class":101},[88,3021,327],{"class":105},[88,3023,330],{"class":232},[88,3025,109],{"class":101},[88,3027,3028],{"class":90,"line":1738},[88,3029,547],{"class":101},[88,3031,3032,3034,3036],{"class":90,"line":1743},[88,3033,163],{"class":101},[88,3035,327],{"class":105},[88,3037,109],{"class":101},[22,3039,3041],{"id":3040},"children-parent","$children $parent",[14,3043,3044,3046,3047,3050,3051,3054,3055,3058,3059,3061,3062,1823,3064,3066,3067,1823,3069,3072,3073,3076,3077,1823,3080,3083,3084,3086,3087,3089,3090,3093,3094,2223,3097,1823,3100,3103],{},[17,3045,3041],{},"适用于父子组件以及跨级组件的通信，这种方式就比较直观了，直接操作父子组件的实例，",[17,3048,3049],{},"$parent","就是父组件的实例对象，而",[17,3052,3053],{},"$children","就是当前实例的直接子组件实例数组了，官方文档的说明是子实例可以用",[17,3056,3057],{},"this.$parent","访问父实例，子实例被推入父实例的",[17,3060,3053],{},"数组中，节制地使用",[17,3063,3049],{},[17,3065,3053],{},"它们的主要目的是作为访问组件的应急方法，更推荐用",[17,3068,33],{},[17,3070,3071],{},"events","实现父子组件通信。此外在",[17,3074,3075],{},"Vue2","之后移除的",[17,3078,3079],{},"$dispatch",[17,3081,3082],{},"$broadcast","也可以通过",[17,3085,3053],{},"与",[17,3088,3049],{},"进行实现，当然不推荐这样做，官方推荐的方式还是更多简明清晰的组件间通信和更好的状态管理方案如",[17,3091,3092],{},"Vuex","，实际上很多开源框架都还是自己实现了这种组件通信的方式，例如",[17,3095,3096],{},"Mint UI",[17,3098,3099],{},"Element UI",[17,3101,3102],{},"iView","等。",[79,3105,3107],{"className":81,"code":3106,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n        \n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        mounted: function() {\n            console.log(this.$parent); \u002F\u002F VueComponent {_uid: 2, ...}\n            console.log(this.$children); \u002F\u002F []\n        },\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,3108,3109,3113,3121,3129,3133,3141,3149,3153,3161,3169,3177,3187,3191,3195,3205,3216,3232,3248,3252,3256,3260,3264,3268,3276,3280,3290,3294],{"__ignoreMap":84},[88,3110,3111],{"class":90,"line":91},[88,3112,95],{"class":94},[88,3114,3115,3117,3119],{"class":90,"line":98},[88,3116,102],{"class":101},[88,3118,106],{"class":105},[88,3120,109],{"class":101},[88,3122,3123,3125,3127],{"class":90,"line":112},[88,3124,115],{"class":101},[88,3126,118],{"class":105},[88,3128,109],{"class":101},[88,3130,3131],{"class":90,"line":123},[88,3132,1552],{"class":101},[88,3134,3135,3137,3139],{"class":90,"line":130},[88,3136,153],{"class":101},[88,3138,118],{"class":105},[88,3140,109],{"class":101},[88,3142,3143,3145,3147],{"class":90,"line":145},[88,3144,163],{"class":101},[88,3146,106],{"class":105},[88,3148,109],{"class":101},[88,3150,3151],{"class":90,"line":150},[88,3152,127],{"emptyLinePlaceholder":126},[88,3154,3155,3157,3159],{"class":90,"line":160},[88,3156,102],{"class":101},[88,3158,180],{"class":105},[88,3160,109],{"class":101},[88,3162,3163,3165,3167],{"class":90,"line":170},[88,3164,189],{"class":188},[88,3166,192],{"class":188},[88,3168,195],{"class":101},[88,3170,3171,3173,3175],{"class":90,"line":175},[88,3172,201],{"class":101},[88,3174,205],{"class":204},[88,3176,208],{"class":101},[88,3178,3179,3181,3183,3185],{"class":90,"line":185},[88,3180,233],{"class":232},[88,3182,236],{"class":101},[88,3184,239],{"class":188},[88,3186,242],{"class":101},[88,3188,3189],{"class":90,"line":198},[88,3190,248],{"class":101},[88,3192,3193],{"class":90,"line":211},[88,3194,254],{"class":101},[88,3196,3197,3199,3201,3203],{"class":90,"line":217},[88,3198,260],{"class":232},[88,3200,263],{"class":101},[88,3202,266],{"class":188},[88,3204,269],{"class":101},[88,3206,3207,3210,3212,3214],{"class":90,"line":229},[88,3208,3209],{"class":232},"        mounted",[88,3211,263],{"class":101},[88,3213,266],{"class":188},[88,3215,2408],{"class":101},[88,3217,3218,3220,3222,3224,3226,3229],{"class":90,"line":245},[88,3219,2413],{"class":101},[88,3221,2416],{"class":232},[88,3223,960],{"class":101},[88,3225,2421],{"class":972},[88,3227,3228],{"class":101},".$parent); ",[88,3230,3231],{"class":94},"\u002F\u002F VueComponent {_uid: 2, ...}\n",[88,3233,3234,3236,3238,3240,3242,3245],{"class":90,"line":251},[88,3235,2413],{"class":101},[88,3237,2416],{"class":232},[88,3239,960],{"class":101},[88,3241,2421],{"class":972},[88,3243,3244],{"class":101},".$children); ",[88,3246,3247],{"class":94},"\u002F\u002F []\n",[88,3249,3250],{"class":90,"line":257},[88,3251,2137],{"class":101},[88,3253,3254],{"class":90,"line":272},[88,3255,287],{"class":101},[88,3257,3258],{"class":90,"line":284},[88,3259,293],{"class":101},[88,3261,3262],{"class":90,"line":290},[88,3263,299],{"class":101},[88,3265,3266],{"class":90,"line":296},[88,3267,305],{"class":101},[88,3269,3270,3272,3274],{"class":90,"line":302},[88,3271,163],{"class":101},[88,3273,180],{"class":105},[88,3275,109],{"class":101},[88,3277,3278],{"class":90,"line":308},[88,3279,127],{"emptyLinePlaceholder":126},[88,3281,3282,3284,3286,3288],{"class":90,"line":317},[88,3283,102],{"class":101},[88,3285,327],{"class":105},[88,3287,330],{"class":232},[88,3289,109],{"class":101},[88,3291,3292],{"class":90,"line":322},[88,3293,338],{"class":101},[88,3295,3296,3298,3300],{"class":90,"line":335},[88,3297,163],{"class":101},[88,3299,327],{"class":105},[88,3301,109],{"class":101},[79,3303,3305],{"className":81,"code":3304,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild>\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n\n        }),\n        beforeCreate: function() {},\n        mounted: function() {\n            console.log(this.$parent); \u002F\u002F VueComponent {_uid: 1, ...}\n            console.log(this.$children); \u002F\u002F [VueComponent]\n        },\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,3306,3307,3311,3319,3327,3331,3343,3347,3355,3363,3367,3375,3387,3395,3399,3409,3413,3417,3427,3437,3452,3467,3471,3475,3479,3483,3487,3495,3499,3509,3513],{"__ignoreMap":84},[88,3308,3309],{"class":90,"line":91},[88,3310,357],{"class":94},[88,3312,3313,3315,3317],{"class":90,"line":98},[88,3314,102],{"class":101},[88,3316,106],{"class":105},[88,3318,109],{"class":101},[88,3320,3321,3323,3325],{"class":90,"line":112},[88,3322,115],{"class":101},[88,3324,118],{"class":105},[88,3326,109],{"class":101},[88,3328,3329],{"class":90,"line":123},[88,3330,127],{"emptyLinePlaceholder":126},[88,3332,3333,3335,3337,3339,3341],{"class":90,"line":130},[88,3334,133],{"class":101},[88,3336,385],{"class":384},[88,3338,396],{"class":101},[88,3340,385],{"class":384},[88,3342,109],{"class":101},[88,3344,3345],{"class":90,"line":145},[88,3346,127],{"emptyLinePlaceholder":126},[88,3348,3349,3351,3353],{"class":90,"line":150},[88,3350,153],{"class":101},[88,3352,118],{"class":105},[88,3354,109],{"class":101},[88,3356,3357,3359,3361],{"class":90,"line":160},[88,3358,163],{"class":101},[88,3360,106],{"class":105},[88,3362,109],{"class":101},[88,3364,3365],{"class":90,"line":170},[88,3366,127],{"emptyLinePlaceholder":126},[88,3368,3369,3371,3373],{"class":90,"line":175},[88,3370,102],{"class":101},[88,3372,180],{"class":105},[88,3374,109],{"class":101},[88,3376,3377,3379,3381,3383,3385],{"class":90,"line":185},[88,3378,437],{"class":188},[88,3380,440],{"class":101},[88,3382,443],{"class":188},[88,3384,446],{"class":204},[88,3386,449],{"class":101},[88,3388,3389,3391,3393],{"class":90,"line":198},[88,3390,189],{"class":188},[88,3392,192],{"class":188},[88,3394,195],{"class":101},[88,3396,3397],{"class":90,"line":211},[88,3398,462],{"class":101},[88,3400,3401,3403,3405,3407],{"class":90,"line":217},[88,3402,233],{"class":232},[88,3404,236],{"class":101},[88,3406,239],{"class":188},[88,3408,242],{"class":101},[88,3410,3411],{"class":90,"line":229},[88,3412,127],{"emptyLinePlaceholder":126},[88,3414,3415],{"class":90,"line":245},[88,3416,254],{"class":101},[88,3418,3419,3421,3423,3425],{"class":90,"line":251},[88,3420,260],{"class":232},[88,3422,263],{"class":101},[88,3424,266],{"class":188},[88,3426,269],{"class":101},[88,3428,3429,3431,3433,3435],{"class":90,"line":257},[88,3430,3209],{"class":232},[88,3432,263],{"class":101},[88,3434,266],{"class":188},[88,3436,2408],{"class":101},[88,3438,3439,3441,3443,3445,3447,3449],{"class":90,"line":272},[88,3440,2413],{"class":101},[88,3442,2416],{"class":232},[88,3444,960],{"class":101},[88,3446,2421],{"class":972},[88,3448,3228],{"class":101},[88,3450,3451],{"class":94},"\u002F\u002F VueComponent {_uid: 1, ...}\n",[88,3453,3454,3456,3458,3460,3462,3464],{"class":90,"line":284},[88,3455,2413],{"class":101},[88,3457,2416],{"class":232},[88,3459,960],{"class":101},[88,3461,2421],{"class":972},[88,3463,3244],{"class":101},[88,3465,3466],{"class":94},"\u002F\u002F [VueComponent]\n",[88,3468,3469],{"class":90,"line":290},[88,3470,2137],{"class":101},[88,3472,3473],{"class":90,"line":296},[88,3474,287],{"class":101},[88,3476,3477],{"class":90,"line":302},[88,3478,293],{"class":101},[88,3480,3481],{"class":90,"line":308},[88,3482,299],{"class":101},[88,3484,3485],{"class":90,"line":317},[88,3486,305],{"class":101},[88,3488,3489,3491,3493],{"class":90,"line":322},[88,3490,163],{"class":101},[88,3492,180],{"class":105},[88,3494,109],{"class":101},[88,3496,3497],{"class":90,"line":335},[88,3498,127],{"emptyLinePlaceholder":126},[88,3500,3501,3503,3505,3507],{"class":90,"line":341},[88,3502,102],{"class":101},[88,3504,327],{"class":105},[88,3506,330],{"class":232},[88,3508,109],{"class":101},[88,3510,3511],{"class":90,"line":767},[88,3512,547],{"class":101},[88,3514,3515,3517,3519],{"class":90,"line":998},[88,3516,163],{"class":101},[88,3518,327],{"class":105},[88,3520,109],{"class":101},[22,3522,3524],{"id":3523},"refs","$refs",[14,3526,3527,3529,3530,3533,3534,3536,3537,3540,3541,3543,3544,3546,3547,3549],{},[17,3528,3524],{},"适用于父子组件通信，",[17,3531,3532],{},"ref","被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的",[17,3535,3524],{},"对象上，如果在普通的",[17,3538,3539],{},"DOM","元素上使用，引用指向的就是",[17,3542,3539],{},"元素，如果用在子组件上，引用就指向组件实例。要注意的是因为",[17,3545,3532],{},"本身是作为渲染结果被创建的，在初始渲染的时候是不能访问它们的，此时它们还不存在，另外",[17,3548,3524],{},"也不是响应式的，因此也不应该试图用它在模板中做数据绑定。",[79,3551,3553],{"className":81,"code":3552,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n        \n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    export default {\n        name: \"child\",\n        data: () => ({\n            \n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n \n\u003C\u002Fstyle>\n",[17,3554,3555,3559,3567,3575,3579,3587,3595,3599,3607,3615,3623,3633,3637,3641,3651,3661,3665,3669,3673,3677,3685,3689,3699,3703],{"__ignoreMap":84},[88,3556,3557],{"class":90,"line":91},[88,3558,95],{"class":94},[88,3560,3561,3563,3565],{"class":90,"line":98},[88,3562,102],{"class":101},[88,3564,106],{"class":105},[88,3566,109],{"class":101},[88,3568,3569,3571,3573],{"class":90,"line":112},[88,3570,115],{"class":101},[88,3572,118],{"class":105},[88,3574,109],{"class":101},[88,3576,3577],{"class":90,"line":123},[88,3578,1552],{"class":101},[88,3580,3581,3583,3585],{"class":90,"line":130},[88,3582,153],{"class":101},[88,3584,118],{"class":105},[88,3586,109],{"class":101},[88,3588,3589,3591,3593],{"class":90,"line":145},[88,3590,163],{"class":101},[88,3592,106],{"class":105},[88,3594,109],{"class":101},[88,3596,3597],{"class":90,"line":150},[88,3598,127],{"emptyLinePlaceholder":126},[88,3600,3601,3603,3605],{"class":90,"line":160},[88,3602,102],{"class":101},[88,3604,180],{"class":105},[88,3606,109],{"class":101},[88,3608,3609,3611,3613],{"class":90,"line":170},[88,3610,189],{"class":188},[88,3612,192],{"class":188},[88,3614,195],{"class":101},[88,3616,3617,3619,3621],{"class":90,"line":175},[88,3618,201],{"class":101},[88,3620,205],{"class":204},[88,3622,208],{"class":101},[88,3624,3625,3627,3629,3631],{"class":90,"line":185},[88,3626,233],{"class":232},[88,3628,236],{"class":101},[88,3630,239],{"class":188},[88,3632,242],{"class":101},[88,3634,3635],{"class":90,"line":198},[88,3636,248],{"class":101},[88,3638,3639],{"class":90,"line":211},[88,3640,254],{"class":101},[88,3642,3643,3645,3647,3649],{"class":90,"line":217},[88,3644,260],{"class":232},[88,3646,263],{"class":101},[88,3648,266],{"class":188},[88,3650,269],{"class":101},[88,3652,3653,3655,3657,3659],{"class":90,"line":229},[88,3654,275],{"class":232},[88,3656,263],{"class":101},[88,3658,266],{"class":188},[88,3660,269],{"class":101},[88,3662,3663],{"class":90,"line":245},[88,3664,287],{"class":101},[88,3666,3667],{"class":90,"line":251},[88,3668,293],{"class":101},[88,3670,3671],{"class":90,"line":257},[88,3672,299],{"class":101},[88,3674,3675],{"class":90,"line":272},[88,3676,305],{"class":101},[88,3678,3679,3681,3683],{"class":90,"line":284},[88,3680,163],{"class":101},[88,3682,180],{"class":105},[88,3684,109],{"class":101},[88,3686,3687],{"class":90,"line":290},[88,3688,127],{"emptyLinePlaceholder":126},[88,3690,3691,3693,3695,3697],{"class":90,"line":296},[88,3692,102],{"class":101},[88,3694,327],{"class":105},[88,3696,330],{"class":232},[88,3698,109],{"class":101},[88,3700,3701],{"class":90,"line":302},[88,3702,338],{"class":101},[88,3704,3705,3707,3709],{"class":90,"line":308},[88,3706,163],{"class":101},[88,3708,327],{"class":105},[88,3710,109],{"class":101},[79,3712,3714],{"className":81,"code":3713,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cchild ref=\"child\">\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n\n        }),\n        beforeCreate: function() {},\n        created: function() {},\n        mounted: function(){\n            console.log(this.$refs.child); \u002F\u002F VueComponent {_uid: 3, ...}\n        },\n        filters: {},\n        computed: {},\n        methods: {}\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,3715,3716,3720,3728,3736,3740,3759,3763,3771,3779,3783,3791,3803,3811,3815,3825,3829,3833,3843,3853,3864,3880,3884,3888,3892,3896,3900,3908,3912,3922,3926],{"__ignoreMap":84},[88,3717,3718],{"class":90,"line":91},[88,3719,357],{"class":94},[88,3721,3722,3724,3726],{"class":90,"line":98},[88,3723,102],{"class":101},[88,3725,106],{"class":105},[88,3727,109],{"class":101},[88,3729,3730,3732,3734],{"class":90,"line":112},[88,3731,115],{"class":101},[88,3733,118],{"class":105},[88,3735,109],{"class":101},[88,3737,3738],{"class":90,"line":123},[88,3739,127],{"emptyLinePlaceholder":126},[88,3741,3742,3744,3746,3749,3751,3753,3755,3757],{"class":90,"line":130},[88,3743,133],{"class":101},[88,3745,385],{"class":384},[88,3747,3748],{"class":232}," ref",[88,3750,391],{"class":101},[88,3752,205],{"class":204},[88,3754,396],{"class":101},[88,3756,385],{"class":384},[88,3758,109],{"class":101},[88,3760,3761],{"class":90,"line":145},[88,3762,127],{"emptyLinePlaceholder":126},[88,3764,3765,3767,3769],{"class":90,"line":150},[88,3766,153],{"class":101},[88,3768,118],{"class":105},[88,3770,109],{"class":101},[88,3772,3773,3775,3777],{"class":90,"line":160},[88,3774,163],{"class":101},[88,3776,106],{"class":105},[88,3778,109],{"class":101},[88,3780,3781],{"class":90,"line":170},[88,3782,127],{"emptyLinePlaceholder":126},[88,3784,3785,3787,3789],{"class":90,"line":175},[88,3786,102],{"class":101},[88,3788,180],{"class":105},[88,3790,109],{"class":101},[88,3792,3793,3795,3797,3799,3801],{"class":90,"line":185},[88,3794,437],{"class":188},[88,3796,440],{"class":101},[88,3798,443],{"class":188},[88,3800,446],{"class":204},[88,3802,449],{"class":101},[88,3804,3805,3807,3809],{"class":90,"line":198},[88,3806,189],{"class":188},[88,3808,192],{"class":188},[88,3810,195],{"class":101},[88,3812,3813],{"class":90,"line":211},[88,3814,462],{"class":101},[88,3816,3817,3819,3821,3823],{"class":90,"line":217},[88,3818,233],{"class":232},[88,3820,236],{"class":101},[88,3822,239],{"class":188},[88,3824,242],{"class":101},[88,3826,3827],{"class":90,"line":229},[88,3828,127],{"emptyLinePlaceholder":126},[88,3830,3831],{"class":90,"line":245},[88,3832,254],{"class":101},[88,3834,3835,3837,3839,3841],{"class":90,"line":251},[88,3836,260],{"class":232},[88,3838,263],{"class":101},[88,3840,266],{"class":188},[88,3842,269],{"class":101},[88,3844,3845,3847,3849,3851],{"class":90,"line":257},[88,3846,275],{"class":232},[88,3848,263],{"class":101},[88,3850,266],{"class":188},[88,3852,269],{"class":101},[88,3854,3855,3857,3859,3861],{"class":90,"line":272},[88,3856,3209],{"class":232},[88,3858,263],{"class":101},[88,3860,266],{"class":188},[88,3862,3863],{"class":101},"(){\n",[88,3865,3866,3868,3870,3872,3874,3877],{"class":90,"line":284},[88,3867,2413],{"class":101},[88,3869,2416],{"class":232},[88,3871,960],{"class":101},[88,3873,2421],{"class":972},[88,3875,3876],{"class":101},".$refs.child); ",[88,3878,3879],{"class":94},"\u002F\u002F VueComponent {_uid: 3, ...}\n",[88,3881,3882],{"class":90,"line":290},[88,3883,2137],{"class":101},[88,3885,3886],{"class":90,"line":296},[88,3887,287],{"class":101},[88,3889,3890],{"class":90,"line":302},[88,3891,293],{"class":101},[88,3893,3894],{"class":90,"line":308},[88,3895,299],{"class":101},[88,3897,3898],{"class":90,"line":317},[88,3899,305],{"class":101},[88,3901,3902,3904,3906],{"class":90,"line":322},[88,3903,163],{"class":101},[88,3905,180],{"class":105},[88,3907,109],{"class":101},[88,3909,3910],{"class":90,"line":335},[88,3911,127],{"emptyLinePlaceholder":126},[88,3913,3914,3916,3918,3920],{"class":90,"line":341},[88,3915,102],{"class":101},[88,3917,327],{"class":105},[88,3919,330],{"class":232},[88,3921,109],{"class":101},[88,3923,3924],{"class":90,"line":767},[88,3925,547],{"class":101},[88,3927,3928,3930,3932],{"class":90,"line":998},[88,3929,163],{"class":101},[88,3931,327],{"class":105},[88,3933,109],{"class":101},[22,3935,3937],{"id":3936},"eventbus","EventBus",[14,3939,3940,3942,3943,3945,3946,3948,3949,3952,3953,3955,3956,3959,3960,3963],{},[17,3941,3937],{},"可以适用于任何情况的组件通信，在项目规模不大的情况下，完全可以使用中央事件总线",[17,3944,3937],{}," 的方式，",[17,3947,3937],{},"可以比较完美地解决包括父子组件、兄弟组件、隔代组件之间通信，实际上就是一个观察者模式，观察者模式建立了一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应做出反应。所以发生改变的对象称为观察目标，而被通知的对象称为观察者，一个观察目标可以对应多个观察者，而且这些观察者之间没有相互联系，可以根据需要增加和删除观察者，使得系统更易于扩展。首先我们需要实现一个订阅发布类作为单例模块导出，并挂载到",[17,3950,3951],{},"Vue.prototype","作为",[17,3954,19],{},"实例中可调用的全局对象使用，当然作为",[17,3957,3958],{},"Mixins","全局静态横切也可以，或者每个需要的组件再进行",[17,3961,3962],{},"import","也可以，此外务必注意在组件销毁的时候卸载订阅的事件调用，否则会造成内存泄漏。",[79,3965,3969],{"className":3966,"code":3967,"language":3968,"meta":84,"style":84},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F 实现一个PubSub模块\nvar PubSub = function() {\n    this.handlers = {};\n}\n\nPubSub.prototype = {\n    constructor: PubSub,\n    on: function(key, handler) { \u002F\u002F 订阅\n        if(!(key in this.handlers)) this.handlers[key] = [];\n        if(!this.handlers[key].includes(handler)) {\n             this.handlers[key].push(handler);\n             return true;\n        }\n        return false;\n    },\n\n    once: function(key, handler) { \u002F\u002F 一次性订阅\n        if(!(key in this.handlers)) this.handlers[key] = [];\n        if(this.handlers[key].includes(handler)) return false;\n        const onceHandler = (...args) => {\n            handler.apply(this, args);\n            this.off(key, onceHandler);\n        }\n        this.handlers[key].push(onceHandler);\n        return true;\n    },\n\n    off: function(key, handler) { \u002F\u002F 卸载\n        const index = this.handlers[key].findIndex(item => item === handler);\n        if (index \u003C 0) return false;\n        if (this.handlers[key].length === 1) delete this.handlers[key];\n        else this.handlers[key].splice(index, 1);\n        return true;\n    },\n\n    commit: function(key, ...args) { \u002F\u002F 触发\n        if (!this.handlers[key]) return false;\n        console.log(key, \"Execute\");\n        this.handlers[key].forEach(handler => handler.apply(this, args));\n        return true;\n    },\n\n}\n\nexport default new PubSub();\n","javascript",[17,3970,3971,3976,3981,3986,3991,3995,4000,4005,4010,4015,4020,4025,4030,4034,4039,4044,4048,4053,4057,4062,4067,4072,4077,4081,4086,4091,4095,4099,4104,4109,4114,4119,4124,4128,4132,4136,4141,4146,4151,4156,4160,4165,4170,4175,4180],{"__ignoreMap":84},[88,3972,3973],{"class":90,"line":91},[88,3974,3975],{},"\u002F\u002F 实现一个PubSub模块\n",[88,3977,3978],{"class":90,"line":98},[88,3979,3980],{},"var PubSub = function() {\n",[88,3982,3983],{"class":90,"line":112},[88,3984,3985],{},"    this.handlers = {};\n",[88,3987,3988],{"class":90,"line":123},[88,3989,3990],{},"}\n",[88,3992,3993],{"class":90,"line":130},[88,3994,127],{"emptyLinePlaceholder":126},[88,3996,3997],{"class":90,"line":145},[88,3998,3999],{},"PubSub.prototype = {\n",[88,4001,4002],{"class":90,"line":150},[88,4003,4004],{},"    constructor: PubSub,\n",[88,4006,4007],{"class":90,"line":160},[88,4008,4009],{},"    on: function(key, handler) { \u002F\u002F 订阅\n",[88,4011,4012],{"class":90,"line":170},[88,4013,4014],{},"        if(!(key in this.handlers)) this.handlers[key] = [];\n",[88,4016,4017],{"class":90,"line":175},[88,4018,4019],{},"        if(!this.handlers[key].includes(handler)) {\n",[88,4021,4022],{"class":90,"line":185},[88,4023,4024],{},"             this.handlers[key].push(handler);\n",[88,4026,4027],{"class":90,"line":198},[88,4028,4029],{},"             return true;\n",[88,4031,4032],{"class":90,"line":211},[88,4033,991],{},[88,4035,4036],{"class":90,"line":217},[88,4037,4038],{},"        return false;\n",[88,4040,4041],{"class":90,"line":229},[88,4042,4043],{},"    },\n",[88,4045,4046],{"class":90,"line":245},[88,4047,127],{"emptyLinePlaceholder":126},[88,4049,4050],{"class":90,"line":251},[88,4051,4052],{},"    once: function(key, handler) { \u002F\u002F 一次性订阅\n",[88,4054,4055],{"class":90,"line":257},[88,4056,4014],{},[88,4058,4059],{"class":90,"line":272},[88,4060,4061],{},"        if(this.handlers[key].includes(handler)) return false;\n",[88,4063,4064],{"class":90,"line":284},[88,4065,4066],{},"        const onceHandler = (...args) => {\n",[88,4068,4069],{"class":90,"line":290},[88,4070,4071],{},"            handler.apply(this, args);\n",[88,4073,4074],{"class":90,"line":296},[88,4075,4076],{},"            this.off(key, onceHandler);\n",[88,4078,4079],{"class":90,"line":302},[88,4080,991],{},[88,4082,4083],{"class":90,"line":308},[88,4084,4085],{},"        this.handlers[key].push(onceHandler);\n",[88,4087,4088],{"class":90,"line":317},[88,4089,4090],{},"        return true;\n",[88,4092,4093],{"class":90,"line":322},[88,4094,4043],{},[88,4096,4097],{"class":90,"line":335},[88,4098,127],{"emptyLinePlaceholder":126},[88,4100,4101],{"class":90,"line":341},[88,4102,4103],{},"    off: function(key, handler) { \u002F\u002F 卸载\n",[88,4105,4106],{"class":90,"line":767},[88,4107,4108],{},"        const index = this.handlers[key].findIndex(item => item === handler);\n",[88,4110,4111],{"class":90,"line":998},[88,4112,4113],{},"        if (index \u003C 0) return false;\n",[88,4115,4116],{"class":90,"line":1007},[88,4117,4118],{},"        if (this.handlers[key].length === 1) delete this.handlers[key];\n",[88,4120,4121],{"class":90,"line":1012},[88,4122,4123],{},"        else this.handlers[key].splice(index, 1);\n",[88,4125,4126],{"class":90,"line":1023},[88,4127,4090],{},[88,4129,4130],{"class":90,"line":1028},[88,4131,4043],{},[88,4133,4134],{"class":90,"line":1738},[88,4135,127],{"emptyLinePlaceholder":126},[88,4137,4138],{"class":90,"line":1743},[88,4139,4140],{},"    commit: function(key, ...args) { \u002F\u002F 触发\n",[88,4142,4143],{"class":90,"line":1752},[88,4144,4145],{},"        if (!this.handlers[key]) return false;\n",[88,4147,4148],{"class":90,"line":1757},[88,4149,4150],{},"        console.log(key, \"Execute\");\n",[88,4152,4153],{"class":90,"line":1768},[88,4154,4155],{},"        this.handlers[key].forEach(handler => handler.apply(this, args));\n",[88,4157,4158],{"class":90,"line":1773},[88,4159,4090],{},[88,4161,4163],{"class":90,"line":4162},41,[88,4164,4043],{},[88,4166,4168],{"class":90,"line":4167},42,[88,4169,127],{"emptyLinePlaceholder":126},[88,4171,4173],{"class":90,"line":4172},43,[88,4174,3990],{},[88,4176,4178],{"class":90,"line":4177},44,[88,4179,127],{"emptyLinePlaceholder":126},[88,4181,4183],{"class":90,"line":4182},45,[88,4184,4185],{},"export default new PubSub();\n",[79,4187,4189],{"className":81,"code":4188,"language":83,"meta":84,"style":84},"\u003C!-- 子组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>{{msg}}\u003C\u002Fdiv>\n        \u003Cchild>\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg: \"init\"\n        }),\n        beforeCreate: function() {},\n        created: function() {\n            this.eventBus.on(\"ChangeMsg\", this.changeMsg);\n        },\n        beforeDestroy: function(){\n            this.eventBus.off(\"ChangeMsg\", this.changeMsg);\n        },\n        filters: {},\n        computed: {},\n        methods: {\n            changeMsg: function(msg){\n                this.msg = msg;\n            }\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,4190,4191,4195,4203,4211,4215,4227,4239,4243,4251,4259,4263,4271,4283,4291,4295,4305,4312,4316,4326,4336,4359,4363,4374,4393,4397,4401,4405,4409,4423,4433,4437,4441,4445,4453,4457,4467,4471],{"__ignoreMap":84},[88,4192,4193],{"class":90,"line":91},[88,4194,95],{"class":94},[88,4196,4197,4199,4201],{"class":90,"line":98},[88,4198,102],{"class":101},[88,4200,106],{"class":105},[88,4202,109],{"class":101},[88,4204,4205,4207,4209],{"class":90,"line":112},[88,4206,115],{"class":101},[88,4208,118],{"class":105},[88,4210,109],{"class":101},[88,4212,4213],{"class":90,"line":123},[88,4214,127],{"emptyLinePlaceholder":126},[88,4216,4217,4219,4221,4223,4225],{"class":90,"line":130},[88,4218,133],{"class":101},[88,4220,118],{"class":105},[88,4222,1093],{"class":101},[88,4224,118],{"class":105},[88,4226,109],{"class":101},[88,4228,4229,4231,4233,4235,4237],{"class":90,"line":145},[88,4230,133],{"class":101},[88,4232,385],{"class":384},[88,4234,396],{"class":101},[88,4236,385],{"class":384},[88,4238,109],{"class":101},[88,4240,4241],{"class":90,"line":150},[88,4242,127],{"emptyLinePlaceholder":126},[88,4244,4245,4247,4249],{"class":90,"line":160},[88,4246,153],{"class":101},[88,4248,118],{"class":105},[88,4250,109],{"class":101},[88,4252,4253,4255,4257],{"class":90,"line":170},[88,4254,163],{"class":101},[88,4256,106],{"class":105},[88,4258,109],{"class":101},[88,4260,4261],{"class":90,"line":175},[88,4262,127],{"emptyLinePlaceholder":126},[88,4264,4265,4267,4269],{"class":90,"line":185},[88,4266,102],{"class":101},[88,4268,180],{"class":105},[88,4270,109],{"class":101},[88,4272,4273,4275,4277,4279,4281],{"class":90,"line":198},[88,4274,437],{"class":188},[88,4276,440],{"class":101},[88,4278,443],{"class":188},[88,4280,446],{"class":204},[88,4282,449],{"class":101},[88,4284,4285,4287,4289],{"class":90,"line":211},[88,4286,189],{"class":188},[88,4288,192],{"class":188},[88,4290,195],{"class":101},[88,4292,4293],{"class":90,"line":217},[88,4294,462],{"class":101},[88,4296,4297,4299,4301,4303],{"class":90,"line":229},[88,4298,233],{"class":232},[88,4300,236],{"class":101},[88,4302,239],{"class":188},[88,4304,242],{"class":101},[88,4306,4307,4309],{"class":90,"line":245},[88,4308,477],{"class":101},[88,4310,4311],{"class":204},"\"init\"\n",[88,4313,4314],{"class":90,"line":251},[88,4315,254],{"class":101},[88,4317,4318,4320,4322,4324],{"class":90,"line":257},[88,4319,260],{"class":232},[88,4321,263],{"class":101},[88,4323,266],{"class":188},[88,4325,269],{"class":101},[88,4327,4328,4330,4332,4334],{"class":90,"line":272},[88,4329,275],{"class":232},[88,4331,263],{"class":101},[88,4333,266],{"class":188},[88,4335,2408],{"class":101},[88,4337,4338,4341,4344,4347,4349,4352,4354,4356],{"class":90,"line":284},[88,4339,4340],{"class":972},"            this",[88,4342,4343],{"class":101},".eventBus.",[88,4345,4346],{"class":232},"on",[88,4348,960],{"class":101},[88,4350,4351],{"class":204},"\"ChangeMsg\"",[88,4353,2660],{"class":101},[88,4355,2421],{"class":972},[88,4357,4358],{"class":101},".changeMsg);\n",[88,4360,4361],{"class":90,"line":290},[88,4362,2137],{"class":101},[88,4364,4365,4368,4370,4372],{"class":90,"line":296},[88,4366,4367],{"class":232},"        beforeDestroy",[88,4369,263],{"class":101},[88,4371,266],{"class":188},[88,4373,3863],{"class":101},[88,4375,4376,4378,4380,4383,4385,4387,4389,4391],{"class":90,"line":302},[88,4377,4340],{"class":972},[88,4379,4343],{"class":101},[88,4381,4382],{"class":232},"off",[88,4384,960],{"class":101},[88,4386,4351],{"class":204},[88,4388,2660],{"class":101},[88,4390,2421],{"class":972},[88,4392,4358],{"class":101},[88,4394,4395],{"class":90,"line":308},[88,4396,2137],{"class":101},[88,4398,4399],{"class":90,"line":317},[88,4400,287],{"class":101},[88,4402,4403],{"class":90,"line":322},[88,4404,293],{"class":101},[88,4406,4407],{"class":90,"line":335},[88,4408,948],{"class":101},[88,4410,4411,4413,4415,4417,4419,4421],{"class":90,"line":341},[88,4412,953],{"class":232},[88,4414,263],{"class":101},[88,4416,266],{"class":188},[88,4418,960],{"class":101},[88,4420,964],{"class":963},[88,4422,967],{"class":101},[88,4424,4425,4427,4429,4431],{"class":90,"line":767},[88,4426,973],{"class":972},[88,4428,976],{"class":101},[88,4430,391],{"class":188},[88,4432,981],{"class":101},[88,4434,4435],{"class":90,"line":998},[88,4436,986],{"class":101},[88,4438,4439],{"class":90,"line":1007},[88,4440,991],{"class":101},[88,4442,4443],{"class":90,"line":1012},[88,4444,305],{"class":101},[88,4446,4447,4449,4451],{"class":90,"line":1023},[88,4448,163],{"class":101},[88,4450,180],{"class":105},[88,4452,109],{"class":101},[88,4454,4455],{"class":90,"line":1028},[88,4456,127],{"emptyLinePlaceholder":126},[88,4458,4459,4461,4463,4465],{"class":90,"line":1738},[88,4460,102],{"class":101},[88,4462,327],{"class":105},[88,4464,330],{"class":232},[88,4466,109],{"class":101},[88,4468,4469],{"class":90,"line":1743},[88,4470,547],{"class":101},[88,4472,4473,4475,4477],{"class":90,"line":1752},[88,4474,163],{"class":101},[88,4476,327],{"class":105},[88,4478,109],{"class":101},[79,4480,4482],{"className":81,"code":4481,"language":83,"meta":84,"style":84},"\u003C!-- 父组件 -->\n\u003Ctemplate>\n    \u003Cdiv>\n\n        \u003Cdiv>{{msg}}\u003C\u002Fdiv>\n        \u003Cchild>\u003C\u002Fchild>\n\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    import child from \".\u002Fchild\";\n    export default {\n        components: { child },\n        data: () => ({\n            msg: \"init\"\n        }),\n        beforeCreate: function() {},\n        created: function() {\n            this.eventBus.on(\"ChangeMsg\", this.changeMsg);\n        },\n        beforeDestroy: function(){\n            this.eventBus.off(\"ChangeMsg\", this.changeMsg);\n        },\n        filters: {},\n        computed: {},\n        methods: {\n            changeMsg: function(msg){\n                this.msg = msg;\n            }\n        }\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n    \n\u003C\u002Fstyle>\n",[17,4483,4484,4488,4496,4504,4508,4520,4532,4536,4544,4552,4556,4564,4576,4584,4588,4598,4604,4608,4618,4628,4646,4650,4660,4678,4682,4686,4690,4694,4708,4718,4722,4726,4730,4738,4742,4752,4756],{"__ignoreMap":84},[88,4485,4486],{"class":90,"line":91},[88,4487,357],{"class":94},[88,4489,4490,4492,4494],{"class":90,"line":98},[88,4491,102],{"class":101},[88,4493,106],{"class":105},[88,4495,109],{"class":101},[88,4497,4498,4500,4502],{"class":90,"line":112},[88,4499,115],{"class":101},[88,4501,118],{"class":105},[88,4503,109],{"class":101},[88,4505,4506],{"class":90,"line":123},[88,4507,127],{"emptyLinePlaceholder":126},[88,4509,4510,4512,4514,4516,4518],{"class":90,"line":130},[88,4511,133],{"class":101},[88,4513,118],{"class":105},[88,4515,1093],{"class":101},[88,4517,118],{"class":105},[88,4519,109],{"class":101},[88,4521,4522,4524,4526,4528,4530],{"class":90,"line":145},[88,4523,133],{"class":101},[88,4525,385],{"class":384},[88,4527,396],{"class":101},[88,4529,385],{"class":384},[88,4531,109],{"class":101},[88,4533,4534],{"class":90,"line":150},[88,4535,127],{"emptyLinePlaceholder":126},[88,4537,4538,4540,4542],{"class":90,"line":160},[88,4539,153],{"class":101},[88,4541,118],{"class":105},[88,4543,109],{"class":101},[88,4545,4546,4548,4550],{"class":90,"line":170},[88,4547,163],{"class":101},[88,4549,106],{"class":105},[88,4551,109],{"class":101},[88,4553,4554],{"class":90,"line":175},[88,4555,127],{"emptyLinePlaceholder":126},[88,4557,4558,4560,4562],{"class":90,"line":185},[88,4559,102],{"class":101},[88,4561,180],{"class":105},[88,4563,109],{"class":101},[88,4565,4566,4568,4570,4572,4574],{"class":90,"line":198},[88,4567,437],{"class":188},[88,4569,440],{"class":101},[88,4571,443],{"class":188},[88,4573,446],{"class":204},[88,4575,449],{"class":101},[88,4577,4578,4580,4582],{"class":90,"line":211},[88,4579,189],{"class":188},[88,4581,192],{"class":188},[88,4583,195],{"class":101},[88,4585,4586],{"class":90,"line":217},[88,4587,462],{"class":101},[88,4589,4590,4592,4594,4596],{"class":90,"line":229},[88,4591,233],{"class":232},[88,4593,236],{"class":101},[88,4595,239],{"class":188},[88,4597,242],{"class":101},[88,4599,4600,4602],{"class":90,"line":245},[88,4601,477],{"class":101},[88,4603,4311],{"class":204},[88,4605,4606],{"class":90,"line":251},[88,4607,254],{"class":101},[88,4609,4610,4612,4614,4616],{"class":90,"line":257},[88,4611,260],{"class":232},[88,4613,263],{"class":101},[88,4615,266],{"class":188},[88,4617,269],{"class":101},[88,4619,4620,4622,4624,4626],{"class":90,"line":272},[88,4621,275],{"class":232},[88,4623,263],{"class":101},[88,4625,266],{"class":188},[88,4627,2408],{"class":101},[88,4629,4630,4632,4634,4636,4638,4640,4642,4644],{"class":90,"line":284},[88,4631,4340],{"class":972},[88,4633,4343],{"class":101},[88,4635,4346],{"class":232},[88,4637,960],{"class":101},[88,4639,4351],{"class":204},[88,4641,2660],{"class":101},[88,4643,2421],{"class":972},[88,4645,4358],{"class":101},[88,4647,4648],{"class":90,"line":290},[88,4649,2137],{"class":101},[88,4651,4652,4654,4656,4658],{"class":90,"line":296},[88,4653,4367],{"class":232},[88,4655,263],{"class":101},[88,4657,266],{"class":188},[88,4659,3863],{"class":101},[88,4661,4662,4664,4666,4668,4670,4672,4674,4676],{"class":90,"line":302},[88,4663,4340],{"class":972},[88,4665,4343],{"class":101},[88,4667,4382],{"class":232},[88,4669,960],{"class":101},[88,4671,4351],{"class":204},[88,4673,2660],{"class":101},[88,4675,2421],{"class":972},[88,4677,4358],{"class":101},[88,4679,4680],{"class":90,"line":308},[88,4681,2137],{"class":101},[88,4683,4684],{"class":90,"line":317},[88,4685,287],{"class":101},[88,4687,4688],{"class":90,"line":322},[88,4689,293],{"class":101},[88,4691,4692],{"class":90,"line":335},[88,4693,948],{"class":101},[88,4695,4696,4698,4700,4702,4704,4706],{"class":90,"line":341},[88,4697,953],{"class":232},[88,4699,263],{"class":101},[88,4701,266],{"class":188},[88,4703,960],{"class":101},[88,4705,964],{"class":963},[88,4707,967],{"class":101},[88,4709,4710,4712,4714,4716],{"class":90,"line":767},[88,4711,973],{"class":972},[88,4713,976],{"class":101},[88,4715,391],{"class":188},[88,4717,981],{"class":101},[88,4719,4720],{"class":90,"line":998},[88,4721,986],{"class":101},[88,4723,4724],{"class":90,"line":1007},[88,4725,991],{"class":101},[88,4727,4728],{"class":90,"line":1012},[88,4729,305],{"class":101},[88,4731,4732,4734,4736],{"class":90,"line":1023},[88,4733,163],{"class":101},[88,4735,180],{"class":105},[88,4737,109],{"class":101},[88,4739,4740],{"class":90,"line":1028},[88,4741,127],{"emptyLinePlaceholder":126},[88,4743,4744,4746,4748,4750],{"class":90,"line":1738},[88,4745,102],{"class":101},[88,4747,327],{"class":105},[88,4749,330],{"class":232},[88,4751,109],{"class":101},[88,4753,4754],{"class":90,"line":1743},[88,4755,547],{"class":101},[88,4757,4758,4760,4762],{"class":90,"line":1752},[88,4759,163],{"class":101},[88,4761,327],{"class":105},[88,4763,109],{"class":101},[22,4765,3092],{"id":4766},"vuex",[14,4768,4769,4771,4772,4774,4775,4778,4779,4781,4782,4784,4785,4788,4789,4791,4792,1059,4795,4797],{},[17,4770,3092],{},"同样可以适用于任何情况的组件通信，",[17,4773,3092],{},"是一个专为",[17,4776,4777],{},"Vue.js","应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。",[54,4780],{},"\n每一个",[17,4783,3092],{},"应用的核心就是",[17,4786,4787],{},"store","仓库，",[17,4790,4787],{},"基本上就是一个容器，它包含着你的应用中大部分的状态",[17,4793,4794],{},"state",[17,4796,3092],{},"和单纯的全局对象有以下两点不同：",[4799,4800,4801,4816],"ul",{},[4802,4803,4804,4806,4807,4809,4810,4812,4813,4815],"li",{},[17,4805,3092],{},"的状态存储是响应式的，当",[17,4808,19],{},"组件从",[17,4811,4787],{},"中读取状态的时候，若",[17,4814,4787],{},"中的状态发生变化，那么相应的组件也会相应地得到高效更新。",[4802,4817,4818,4819,4821,4822,4824,4825,4828],{},"不能直接改变",[17,4820,4787],{},"中的状态，改变",[17,4823,4787],{},"中的状态的唯一途径就是显式地提交",[17,4826,4827],{},"mutation","，这样使得我们可以方便地跟踪每一个状态的变化。",[14,4830,4831,4832,4834],{},"实际上我们可以得到更多使用",[17,4833,3092],{},"的优点：",[4799,4836,4837,4840,4845,4851],{},[4802,4838,4839],{},"可以使用时间旅行功能。",[4802,4841,4842,4844],{},[17,4843,3092],{},"专做态管理，由一个统一的方法去修改数据，全部的修改都是可以追溯的。",[4802,4846,4847,4848,4850],{},"在做日志搜集，埋点的时候，有",[17,4849,3092],{},"更方便。",[4802,4852,4853,4855],{},[17,4854,3092],{},"不会造成全局变量的污染，同时解决了父组件与孙组件，以及兄弟组件之间通信的问题。",[14,4857,4858,4859,4861,4862,4864,4865,4867,4868,4870,4871,4873,4874,4877],{},"当然如果项目足够小，使用",[17,4860,3092],{},"可能是繁琐冗余的。如果应用够简单，最好不要使用",[17,4863,3092],{},"，上文中的一个简单的",[17,4866,4787],{},"模式就足够了。",[54,4869],{},"\n在下面例子中，我们通过提交",[17,4872,4827],{},"的方式，而非直接改变",[17,4875,4876],{},"store.state.count","，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。",[79,4879,4881],{"className":3966,"code":4880,"language":3968,"meta":84,"style":84},"import Vue from \"vue\";\nimport Vuex from \"vuex\";\n\nVue.use(Vuex);\n\nconst store = new Vuex.Store({\n    state: {\n        count: 0\n    },\n    mutations: {\n        increment: function(state) {\n            state.count++;\n        }\n    }\n})\n\nstore.commit(\"increment\");\nconsole.log(store.state.count); \u002F\u002F 1\n",[17,4882,4883,4888,4893,4897,4902,4906,4911,4916,4921,4925,4930,4935,4940,4944,4948,4953,4957,4962],{"__ignoreMap":84},[88,4884,4885],{"class":90,"line":91},[88,4886,4887],{},"import Vue from \"vue\";\n",[88,4889,4890],{"class":90,"line":98},[88,4891,4892],{},"import Vuex from \"vuex\";\n",[88,4894,4895],{"class":90,"line":112},[88,4896,127],{"emptyLinePlaceholder":126},[88,4898,4899],{"class":90,"line":123},[88,4900,4901],{},"Vue.use(Vuex);\n",[88,4903,4904],{"class":90,"line":130},[88,4905,127],{"emptyLinePlaceholder":126},[88,4907,4908],{"class":90,"line":145},[88,4909,4910],{},"const store = new Vuex.Store({\n",[88,4912,4913],{"class":90,"line":150},[88,4914,4915],{},"    state: {\n",[88,4917,4918],{"class":90,"line":160},[88,4919,4920],{},"        count: 0\n",[88,4922,4923],{"class":90,"line":170},[88,4924,4043],{},[88,4926,4927],{"class":90,"line":175},[88,4928,4929],{},"    mutations: {\n",[88,4931,4932],{"class":90,"line":185},[88,4933,4934],{},"        increment: function(state) {\n",[88,4936,4937],{"class":90,"line":198},[88,4938,4939],{},"            state.count++;\n",[88,4941,4942],{"class":90,"line":211},[88,4943,991],{},[88,4945,4946],{"class":90,"line":217},[88,4947,305],{},[88,4949,4950],{"class":90,"line":229},[88,4951,4952],{},"})\n",[88,4954,4955],{"class":90,"line":245},[88,4956,127],{"emptyLinePlaceholder":126},[88,4958,4959],{"class":90,"line":251},[88,4960,4961],{},"store.commit(\"increment\");\n",[88,4963,4964],{"class":90,"line":257},[88,4965,4966],{},"console.log(store.state.count); \u002F\u002F 1\n",[14,4968,4969,4970,4972,4973,4975,4976,4979,4980,4982],{},"由于",[17,4971,4787],{},"中的状态是响应式的，在组件中调用",[17,4974,4787],{},"中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的",[17,4977,4978],{},"methods","中提交",[17,4981,4827],{},"即可。",[79,4984,4986],{"className":3966,"code":4985,"language":3968,"meta":84,"style":84},"import Vue from \"vue\";\nimport Vuex from \"vuex\";\n\nVue.use(Vuex);\n\n\nconst store = new Vuex.Store({\n    state: {\n        count: 0\n    },\n    mutations: {\n        increment: state => state.count++,\n        decrement: state => state.count--\n    }\n})\n\nnew Vue({\n    el: \"#app\",\n    store,  \n    computed: {\n        count: function() {\n            return this.$store.state.count;\n        }\n    },\n     methods: {\n        increment: function() {\n            this.$store.commit(\"increment\");\n        },\n        decrement: function() {\n            this.$store.commit(\"decrement\");\n        }\n    }\n})\n",[17,4987,4988,4992,4996,5000,5004,5008,5012,5016,5020,5024,5028,5032,5037,5042,5046,5050,5054,5059,5064,5069,5074,5079,5084,5088,5092,5097,5102,5107,5111,5116,5121,5125,5129],{"__ignoreMap":84},[88,4989,4990],{"class":90,"line":91},[88,4991,4887],{},[88,4993,4994],{"class":90,"line":98},[88,4995,4892],{},[88,4997,4998],{"class":90,"line":112},[88,4999,127],{"emptyLinePlaceholder":126},[88,5001,5002],{"class":90,"line":123},[88,5003,4901],{},[88,5005,5006],{"class":90,"line":130},[88,5007,127],{"emptyLinePlaceholder":126},[88,5009,5010],{"class":90,"line":145},[88,5011,127],{"emptyLinePlaceholder":126},[88,5013,5014],{"class":90,"line":150},[88,5015,4910],{},[88,5017,5018],{"class":90,"line":160},[88,5019,4915],{},[88,5021,5022],{"class":90,"line":170},[88,5023,4920],{},[88,5025,5026],{"class":90,"line":175},[88,5027,4043],{},[88,5029,5030],{"class":90,"line":185},[88,5031,4929],{},[88,5033,5034],{"class":90,"line":198},[88,5035,5036],{},"        increment: state => state.count++,\n",[88,5038,5039],{"class":90,"line":211},[88,5040,5041],{},"        decrement: state => state.count--\n",[88,5043,5044],{"class":90,"line":217},[88,5045,305],{},[88,5047,5048],{"class":90,"line":229},[88,5049,4952],{},[88,5051,5052],{"class":90,"line":245},[88,5053,127],{"emptyLinePlaceholder":126},[88,5055,5056],{"class":90,"line":251},[88,5057,5058],{},"new Vue({\n",[88,5060,5061],{"class":90,"line":257},[88,5062,5063],{},"    el: \"#app\",\n",[88,5065,5066],{"class":90,"line":272},[88,5067,5068],{},"    store,  \n",[88,5070,5071],{"class":90,"line":284},[88,5072,5073],{},"    computed: {\n",[88,5075,5076],{"class":90,"line":290},[88,5077,5078],{},"        count: function() {\n",[88,5080,5081],{"class":90,"line":296},[88,5082,5083],{},"            return this.$store.state.count;\n",[88,5085,5086],{"class":90,"line":302},[88,5087,991],{},[88,5089,5090],{"class":90,"line":308},[88,5091,4043],{},[88,5093,5094],{"class":90,"line":317},[88,5095,5096],{},"     methods: {\n",[88,5098,5099],{"class":90,"line":322},[88,5100,5101],{},"        increment: function() {\n",[88,5103,5104],{"class":90,"line":335},[88,5105,5106],{},"            this.$store.commit(\"increment\");\n",[88,5108,5109],{"class":90,"line":341},[88,5110,2137],{},[88,5112,5113],{"class":90,"line":767},[88,5114,5115],{},"        decrement: function() {\n",[88,5117,5118],{"class":90,"line":998},[88,5119,5120],{},"            this.$store.commit(\"decrement\");\n",[88,5122,5123],{"class":90,"line":1007},[88,5124,991],{},[88,5126,5127],{"class":90,"line":1012},[88,5128,305],{},[88,5130,5131],{"class":90,"line":1023},[88,5132,4952],{},[22,5134,5135],{"id":5135},"每日一题",[79,5137,5142],{"className":5138,"code":5140,"language":5141},[5139],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,5143,5140],{"__ignoreMap":84},[22,5145,5146],{"id":5146},"参考",[79,5148,5151],{"className":5149,"code":5150,"language":5141},[5139],"https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F109700915\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903887162310669\nhttps:\u002F\u002Fjuejin.cn\u002Fpost\u002F6844903784963899405\nhttps:\u002F\u002Fsegmentfault.com\u002Fa\u002F1190000022083517\nhttps:\u002F\u002Fgithub.com\u002Fyangtao2o\u002Flearn\u002Fissues\u002F97\nhttps:\u002F\u002Fgithub.com\u002FYangYmimi\u002Fread-vue\u002Fissues\u002F12\n",[17,5152,5150],{"__ignoreMap":84},[327,5154,5155],{},"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":84,"searchDepth":98,"depth":98,"links":5157},[5158,5164,5165,5166,5167,5168,5169,5170,5171],{"id":24,"depth":98,"text":25,"children":5159},[5160,5161,5162,5163],{"id":71,"depth":112,"text":71},{"id":558,"depth":112,"text":558},{"id":1037,"depth":112,"text":1037},{"id":1254,"depth":112,"text":1254},{"id":1782,"depth":98,"text":1783},{"id":2210,"depth":98,"text":2211},{"id":3040,"depth":98,"text":3041},{"id":3523,"depth":98,"text":3524},{"id":3936,"depth":98,"text":3937},{"id":4766,"depth":98,"text":3092},{"id":5135,"depth":98,"text":5135},{"id":5146,"depth":98,"text":5146},"Vue中组件间通信包括父子组件、兄弟组件、跨级组件、非嵌套组件之间通信。","md",{},"\u002Fvue\u002Fvue中组件间通信的方式",{"title":5,"description":5172},"Vue\u002FVue中组件间通信的方式","dNNmPxI_CRmHo85Y2GThkmp861vsjeSARPUvZyuyZB4",1791042470443]