父子组件传值以及通过 selectComponent 获取实例执行方法

本文共有8684个字，关键词：

<p>一、在父组件中定义方法</p><p>二、通过事件绑定的形式将方法传给子组件</p><p>三、在子组件中以触发事件的形式，将数据传给父组件</p><p>父组件 wxml<br/></p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span>父组件的数据<span style="color: #89ddff;">{{</span><span style="color: #d0d0d0;">count</span><span style="color: #89ddff;">}}</</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span></p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span> ---------- <span style="color: #89ddff;"></</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span></p><p><span style="color: #7ccd7d;"></span></p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">tst</span><span style="color: #89ddff;"> </span><span style="color: #c0c0c0;">count</span><span style="color: #89ddff;">="{{</span><span style="color: #d0d0d0;">count</span><span style="color: #89ddff;">}}" </span><span style="color: #c0c0c0;">bind:sync</span><span style="color: #89ddff;">="</span><span style="color: #fa8072;">sysCount</span><span style="color: #89ddff;">"</span><span style="color: rgb(137, 221, 255);"> </span><span style="color: rgb(192, 192, 192);">class</span><span style="color: rgb(137, 221, 255);">="</span><span style="color: rgb(250, 128, 114);">tst</span><span style="color: rgb(137, 221, 255);">"</span><span style="color: rgb(137, 221, 255);">></</span><span style="color: rgb(113, 199, 255);">tst</span><span style="color: rgb(137, 221, 255);">></span></p><p><span style="color: rgb(137, 221, 255);"><br/></span></p><p><span style="color: rgb(137, 221, 255);"></span></p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">button</span><span style="color: #89ddff;"> </span><span style="color: #c0c0c0;">bindtap</span><span style="color: #89ddff;">="</span><span style="color: #fa8072;">getChild</span><span style="color: #89ddff;">"></span> 获取子组件实例 <span style="color: #89ddff;"></</span><span style="color: #71c7ff;">button</span><span style="color: #89ddff;">></span></p><p><span style="color: rgb(137, 221, 255);"></span><br/></p><p>父组件js</p><p><span style="color: #ffa54f;">Page</span>(<span style="color: #89ddff;">{</span></p><p>  data<span style="color: rgb(137, 221, 255);">:</span> <span style="color: rgb(137, 221, 255);">{</span><br/></p><p>    count<span style="color: #89ddff;">:</span><span style="color: #fa8072;">0</span></p><p>  <span style="color: #89ddff;">},</span></p><p>  <span style="color: #ffa54f;">sysCount</span><span style="color: #89ddff;">(</span><span style="color: #fa8072;">e</span><span style="color: #89ddff;">)</span></p><p>  <span style="color: #89ddff;">{</span></p><p>    <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">setData</span>(<span style="color: #89ddff;">{</span>count<span style="color: #89ddff;">:</span><span style="color: #c0c0c0;">e</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">detail</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">value</span><span style="color: #89ddff;">}</span>)</p><p>  <span style="color: #89ddff;">}，</span></p><p>  <span style="color: #ffa54f;">getChild</span><span style="color: #89ddff;">()</span></p><p>  <span style="color: #89ddff;">{</span></p><p>    <span style="color: #f7e45a;">const</span> <span style="color: #c0c0c0;">child</span> <span style="color: #f7e45a;">=</span> <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">selectComponent</span>(<span style="color: #89ddff;">'</span><span style="color: #fa8072;">.tst</span><span style="color: #89ddff;">'</span>)</p><p><span style="color: #89ddff;">    </span><span style="color: #7ccd7d;">//可以设置子组件的数据</span></p><p>    <span style="color: #c0c0c0;">child</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">setData</span>(<span style="color: #89ddff;">{</span>count<span style="color: #89ddff;">:</span><span style="color: #c0c0c0;">child</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">properties</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">count</span><span style="color: #f7e45a;">+</span><span style="color: #fa8072;">1</span><span style="color: #89ddff;">}</span>)</p><p><span style="color: #89ddff;">    </span><span style="color: #7ccd7d;">//可以执行子组件的方法</span></p><p>    <span style="color: #c0c0c0;">child</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">addCount</span>()</p><p>  <span style="color: #89ddff;">}</span></p><p><span style="color: #89ddff;">}</span></p><p>子组件wxml</p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span>子组件的数据 <span style="color: #89ddff;">{{</span><span style="color: #d0d0d0;">count</span><span style="color: #89ddff;">}}</span> <span style="color: #89ddff;"></</span><span style="color: #71c7ff;">view</span><span style="color: #89ddff;">></span></p><p><span style="color: #89ddff;"><</span><span style="color: #71c7ff;">button</span><span style="color: #89ddff;"> </span><span style="color: #c0c0c0;">bindtap</span><span style="color: #89ddff;">="</span><span style="color: #fa8072;">addCount</span><span style="color: #89ddff;">"></span>+1<span style="color: #89ddff;"></</span><span style="color: #71c7ff;">button</span><span style="color: #89ddff;">></span></p><p>子组件js</p><p><span style="color: #ffa54f;">Component</span>(<span style="color: #89ddff;">{</span></p><p>  <span style="color: #7ccd7d;">/**</span></p><p><span style="color: #7ccd7d;">   * 组件的属性列表</span></p><p><span style="color: #7ccd7d;">   */</span></p><p>  properties<span style="color: #89ddff;">:</span> <span style="color: #89ddff;">{</span></p><p>    count<span style="color: #89ddff;">:</span><span style="color: #87ceeb;">Number</span></p><p>  <span style="color: #89ddff;">},</span></p><p>  <span style="color: rgb(124, 205, 125);">/**</span><br/></p><p><span style="color: #7ccd7d;">   * 组件的方法列表</span></p><p><span style="color: #7ccd7d;">   */</span></p><p>  methods<span style="color: #89ddff;">:</span> <span style="color: #89ddff;">{</span></p><p>    <span style="color: #ffa54f;">addCount</span><span style="color: #89ddff;">(){</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">setData</span>(<span style="color: #89ddff;">{</span>count<span style="color: #89ddff;">:</span><span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">data</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">count</span> <span style="color: #f7e45a;">+</span> <span style="color: #fa8072;">1</span><span style="color: #89ddff;">}</span>)</p><p><span style="color: #89ddff;">      </span><span style="color: #7ccd7d;">//触发自定义事件，将数据同步给父组件</span></p><p>      <span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #ffa54f;">triggerEvent</span>(<span style="color: #89ddff;">'</span><span style="color: #fa8072;">sync</span><span style="color: #89ddff;">'</span><span style="color: #89ddff;">,{</span>value<span style="color: #89ddff;">:</span><span style="color: #66caff;">this</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">properties</span><span style="color: #89ddff;">.</span><span style="color: #c0c0c0;">count</span><span style="color: #89ddff;">}</span>)</p><p>    <span style="color: #89ddff;">}</span></p><p>  <span style="color: #89ddff;">}</span></p><p><span style="color: #89ddff;">}</span>)</p><p><br/></p><p><br/></p>

版权声明：本文为作者原创，如需转载须联系作者本人同意，未经作者本人同意不得擅自转载。

小程序
2022-06-28
评论
673 次浏览

小程序slot 1/1 小程序 behaviors

添加新评论

暂无评论