diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" index 358c42fcc283effb0daab78b8a444142fdfeba7c..03757b57819e85f91a0866004d451a0463de515e 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/2.\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" @@ -1,6 +1,6 @@ { "type": "code_options", - "author": null, + "author": "zhaoss", "source": "exercises.md", "notebook_enable": false, "exercise_id": "c66d8e7eeeb34c16b9f8ce715041b729" diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/config.json" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/config.json" index 1478238aab43239faff112a38b962b9eec758d7f..b8cc3d0482966f91031933912a272203d40d46c0 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/config.json" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/config.json" @@ -1,10 +1,15 @@ { "node_id": "vue-22847c59ec86479299b5f1e071d2215a", - "keywords": [], + "keywords": [ + "非父子组件通讯", + "eventBus" + ], "children": [], "export": [ "exercises.json" ], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" new file mode 100644 index 0000000000000000000000000000000000000000..8806f622daa51f5e8df7f2b255e4a39be36495f1 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "7063431fb2d345128fe6cc7882428db7" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" new file mode 100644 index 0000000000000000000000000000000000000000..71added68e138214596269d66331d002a1b92e9d --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/3.\351\235\236\347\210\266\345\255\220\347\273\204\344\273\266\351\200\232\350\256\257/exercises.md" @@ -0,0 +1,150 @@ +# 非父子组件通讯 + +
几何小常识:
+
+ +**原理:**
+> 通过一个Vue实例来传递数据 + +const bus =new Vue() + +**核心逻辑:**
+>组件A给组件B传值: +>1. 组件A给bus注册一个事件,监听事件的处理程序 +>2. 组件B触发bus上对应的事件,把 值当成参数来传递 +>3. 组件A通过事件处理程序获取数据 +> +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403124524548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) +**最终点击h2控制台会输出2**
+1. 创建1和2两个非父子组件以及vue实例bus +2. 在1组件中 钩子函数created中通过**bus.$on**为bus自定义一个事件aa +3. 在2组件中 当点击h2元素时触发dian函数 并且将值出过去 +4. 在2组件的dian函数中通过**bus.$emit**方触发1中的aa事件 并传参过去 +5. 当1中的aa事件被触发时会执行其中的函数并获取参数 + + +**通过非父子组件 实现开关灯案例**
+ +关闭状态: +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125323123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) +开启状态: +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200403125354722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pIWExf,size_16,color_FFFFFF,t_70) +**代码如下** + +``` + + + + + + + Document + + + + +
+ + +
+ + + + + +``` + +**非父子组件不仅这一种通讯方式,其他方式同学们可以去博文中查看** + +
+ +
心凉小测试:
+ + + + +下列关于非父子组件通讯描述正确的是?

+ +## 答案 + +eventBus其实就是当触发事件时,发送一个通知出去,在需要响应的地方接收这个通知,响应事件。 + +## 选项 + +### A + +eventBus是非父子组件通讯唯一方式。 + +### B + +非父子组件之间进行通讯会造成内存泄漏。 + +### C + +VueX并不能解决非父子通讯问题。 diff --git "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/config.json" "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/config.json" index 93f2142fa908048a56f522e0a2c8930c5975cdbf..636612b01eabb60659e85ee20f4a1114b19c16bc 100644 --- "a/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/config.json" +++ "b/data/2.Vue\344\270\255\351\230\266/1.Vue\347\273\204\344\273\266/4.slot\346\217\222\346\247\275/config.json" @@ -1,8 +1,15 @@ { "node_id": "vue-1611f25b9862458fbfad3899d53d3b81", - "keywords": [], + "keywords": [ + "插槽", + "slot" + ], "children": [], - "export": [], - "keywords_must": [], + "export": [ + "exercises.json" + ], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } \ No newline at end of file diff --git a/data/tree.json b/data/tree.json index 4241ab97befb3276dbd1b48f0475a2eab2386251..1b76e9b2159c59d30728bdefc7282a768408e146 100644 --- a/data/tree.json +++ b/data/tree.json @@ -362,27 +362,41 @@ { "父子组件通讯": { "node_id": "vue-092afd7fc74d41e08b0a065cfa739ab9", - "keywords": [], + "keywords": [ + "父子组件通讯" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } }, { "非父子组件通讯": { "node_id": "vue-22847c59ec86479299b5f1e071d2215a", - "keywords": [], + "keywords": [ + "非父子组件通讯", + "eventBus" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } }, { "slot插槽": { "node_id": "vue-1611f25b9862458fbfad3899d53d3b81", - "keywords": [], + "keywords": [ + "插槽", + "slot" + ], "children": [], - "keywords_must": [], + "keywords_must": [ + "Vue" + ], "keywords_forbid": [] } },