zoukankan      html  css  js  c++  java
  • 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用

    ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容

    1. 页面如何向组件传数据
    2. 组件如何向页面传数据
    3. 页面如何调用组件内的函数
    4. 组件如何调用页面内的函数

    1.页面如何向组件传数据

    ​ 最常用,最规范的方式,设置数据监听器observer

    ​ 假设在页面内引入了组件sc

    "usingComponents": {
        "sc":""
     }
    

    ​ 想要配置一个监听器用来监听页面中数据list的变化,组件在页面中的写法如下:

    <sc
    list="{{list}}"
    >
    </sc>
    
    组件中的监听器写法如下,当页面中的`list`值每次发生变化,都会触发`observer`监听器,打印出变化值。
    
    properties: {
        list:{
          type:Array,
          observer: function (newVal, oldVal){
            console.log(newVal)
          }
        }
    }
    

    ​ 同理,除了动态传值以外,这种方式也可以直接传入静态值,即不需要调用obeserver监听器。在组件中可以直接使用this.properties.*来获取properties中的各个值(*代表各个属性值的名称)。

    2.组件如何向页面传数据

    ​ 既然组件可以设置监听器用来监听页面数据变化,用来达到数据传递的效果,页面同样可以使用监听器,来监听组件触发的信息传送。

    仍然以上面的组件为例,如何向页面中传送信息?

    ​ 在页面中配置组件监听器

    ComponentListener(e){
        let info = e.detail;
     }
    

    ​ 组件选择事件并绑定该监听器

    <sc
    bind:listener="ComponentListener"
    > 
    </sc>
    

    ​ 从组件中往页面传入输入只需要在组件中触发对应事件,e.detail就是传过去的数据

     this.triggerEvent('listener',{func,tid});
    

    3.页面如何调用组件内的函数

    ​ 假设我们引入并使用了一个组件comment-bottom,组件内有函数handleCloseInput,需要在某个逻辑中触发。

    想要使用组件内的函数,必须为组件配置一个唯一id,这样就可以在页面中通过dom操作选中组件并调用组件中的函数。

    <comment-bottom id="commentBottom"></comment-bottom>
    

    ​ 组件中的函数在页面中的调用逻辑如下:

    this.commentBottom = this.selectComponent("#commentBottom");
    this.commentBottom.handleCloseInput();
    

    4.组件如何调用页面内的函数

    ​ 上面向页面传数据的方式,实际上就是调用了页面中的函数。我们可以这样理解该逻辑,将该用法理解为一个函数映射。

    <component bind:componentfunc="pagefun"></component>
    

    ​ 当使用trigger触发componentfunc时,通过bind:这个函数映射关系,就会触发页面中的pagefunc

    ​ 其次,调用页面内的函数,还可以通过页面栈的方式,组件并不占用页面的栈空间,因此在组件中使用getCurrentPages就可以获得对应页面的数据和方法。

    var allpages = getCurrentPages();//获取全部页面数据
    var nowpage = allpages[allpages.length - 1].data;//获取当前页面的数据。
    var nowpage = allpages[allpages.length - 1];//获取页面,包括数据和方法
    

    ​ 这部分内容出自我的一篇文章,我会把地址放在参考文件中。


    结语:

    组件和组件之间的数据传递和组件与页面之间并没有太大区别,组件中也可以嵌套组件。

    参考文件

    微信小程序开发技巧总结 (一)-- 数据传递和存储

  • 相关阅读:
    leetcode231 2的幂 leetcode342 4的幂 leetcode326 3的幂
    leetcode300. Longest Increasing Subsequence 最长递增子序列 、674. Longest Continuous Increasing Subsequence
    leetcode64. Minimum Path Sum
    leetcode 20 括号匹配
    算法题待做
    leetcode 121. Best Time to Buy and Sell Stock 、122.Best Time to Buy and Sell Stock II 、309. Best Time to Buy and Sell Stock with Cooldown 、714. Best Time to Buy and Sell Stock with Transaction Fee
    rand7生成rand10,rand1生成rand6,rand2生成rand5(包含了rand2生成rand3)
    依图
    leetcode 1.Two Sum 、167. Two Sum II
    从分类,排序,top-k多个方面对推荐算法稳定性的评价
  • 原文地址:https://www.cnblogs.com/masterchd/p/14204199.html
Copyright © 2011-2022 走看看