leaflet自定标签json_小程序，自定义组件如何传递数据给页面

接着上篇 小程序，自定义组件之间的引用，使用插槽扩展组件。

这篇说说自定义组件是如何传递数据给页面的。组件与页面是通过事件交互的。

为什么要写这篇文章呢？

因为之前都只是页面新的展现，如果失去了数据的交互，那么就失去了应用的灵魂。我们以主页面最上方添加搜索组件为例。

这里分两个步骤来完成自定义组件与引用了该自定义组件页面之间数据传递。

一：自定义组件search-comp组件。

1. 先按之前文章建好search-comp组件，
2. 在search-comp.wxml、search-comp.wxss文件中分别写入如下代码：

search-comp.wxml

search-comp.wxss

1. 在search-comp.js文件中写好页面上绑定的bindSearch()，triggerEvent()方法有三个参数，第一个指定事件名、第二个detail对象、第三个事件选项，这里第三个参数不用。
2. searchtxt为事件名称，e.detail 为detail对象。

search-comp.js

官网提示：

如果这种方式满足不了还可以通过this.selectComponent()方法或者子组件实例对象，这样就随便访问子组件的方法和数据了，类似于C#或者Java中实例了化了某个类后，就能调用该类中的属性和方法一样：

二.主页面index：

1. index.json配置中引入search-comp组件，名称为“search-comp”。
2. index.wxml页面中使用search-comp标签使用组件，并且使用bind+triggerEvent中定义的事件名称“searchtxt”，或者bind:searchtxt，两种方式都支持。

index.wxml

3.index.js中添加页面中绑定是事件 searchtxt，e.detail.value 就是search-comp组件中输入框输入的值。

index.js

最终效果：

组件输入框输入值

运行效果图

总结：

子组件通过triggerEvent()方法触发页面(父)中绑定的方法，这样就在页面中获取到子组件输入的数据。

谢谢大家浏览，喜欢的点个赞或者关注下，虽然都只是入门级别的，但只有入门级别的掌握好了才能往上走。以前看别人技术博客，觉得几分钟就看完，殊不知别人花了多少时间写。

我是只说代码的大饼，不要只是写代码时想起我，饿了也可以想起我。