svelte组件间通讯

409 阅读1分钟

svelte官网的入门教程很好:www.sveltejs.cn/

学svelte框架一个不会的点:

做项目时遇到组件间通讯的问题,父组件点击切换子组件

1636808546(1).png

有两种方法解决:事件调度(较少组件通讯可以用这种)、利用store管理(许多组件通讯个人推荐用这种,比较方便)

事件调度(较少组件通讯可以用这种)

svelte提供事件调度www.sveltejs.cn/tutorial/co…

现在你需要去看看事件调度再回来,但是这个文档里没有传参(如果友友们知道可以评论区留言教教我)

于是前辈教我在子组件中添加ref属性(可以是单值,我这里是多值用对象)

1636808258(1).png

调用点击事件,点击事件里需要写利用e.target.getAttribute("ref")去获取ref这个对象,然后用一个变量名存。

1636807984(1).png

然后在父组件里这样操作就好(看图)

c0939797802033e08b96b25d6f9f2f2.png

利用store管理(许多组件通讯个人推荐用这种)

教程写的很好,就是新建一个store.js文件存储需要多个文件共同操作的变量,然后在组件中引入,并进行修改(修改后其他组件也是监测得到)就好了。www.sveltejs.cn/tutorial/wr… ,可以去看看,因为我的项目需要许多组件操作同一个变量,所以我是用了store来管理,很方便。