From 45235c0aec709b13785e62434666f870afda1a09 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Thu, 14 Apr 2022 11:12:22 +0800 Subject: [PATCH] =?UTF-8?q?2.1.3=E5=B0=8F=E8=8A=82=E4=B9=A0=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exercises.json" | 2 +- .../config.json" | 9 +- .../exercises.json" | 7 + .../exercises.md" | 150 ++++++++++++++++++ .../config.json" | 13 +- data/tree.json | 26 ++- 6 files changed, 195 insertions(+), 12 deletions(-) create mode 100644 "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" create mode 100644 "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" 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 358c42f..03757b5 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 1478238..b8cc3d0 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 0000000..8806f62 --- /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 0000000..71added --- /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 93f2142..636612b 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 4241ab9..1b76e9b 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": [] } }, -- GitLab