美文网首页工作生活
WeChat小程序组件与页面传值总结

WeChat小程序组件与页面传值总结

作者: LD_左岸 | 来源:发表于2019-07-01 17:47 被阅读0次

    一.页面向组件内部传值

    第一步 在页面的json文件中 配置要引用的组件的路径

    {
      "usingComponents": {
        "my-sel"  : "/components/my-sel/my-sel"
      }
    }
    
    第二步 页面向组件 传值
    在页面中创建组件
    <button size='mini' bind:tap = "handleIncrementCpn">修改组件内的数据</button>
    <my-sel class="sel-class" id = "sel-id"/>
    
    页面的js中实现点击方法
    Page({
       handleIncrementCpn (){
        //1.获取组件对象
        const my_sel = this.selectComponent('.sel-class')
        //通过方法对数据进行修改
        my_sel.incrementCounter(10)
      }
    })
    

    第三步 组件内接收页面传过来的值

    Component({
      /**
       * 组件的初始数据
       */
      data: {
         counter : 0
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        incrementCounter(num){
          this.setData(
            {
             counter : this.data.counter + num
            }
          )
        }
      }
    })
    

    二.组件向页面内部传值

    第一步页面内准备接收组件传过来的值

    <view>当前计数:{{counter}}</view>
    <my-event bind:increment="handleIncrement666"/>
    
    Page({
        data: {
        counter : 0
      }, 
    })
    

    第二步 组件内的值向外传递

    <button size='mini' bind:tap = "handleIncrement">+1</button>
    
    Component({
      /**
       * 组件的方法列表
       */
      methods: {
        handleIncrement(){
         //类似于iOS的通知 将事件发出去
          this.triggerEvent('increment',{name:'why',age : 18});
        }
      }
    })
    
    

    第三步 页面内接收到组件内的事件去执行修改自身值的操作

    Page({
    
      data: {
        counter : 0
      },
      handleIncrement666 (){
    //可接收组件内传过来的值
      console.log("++++++++",event);
        this.setData({
          counter:this.data.counter + 1
        })
      }
    })
    

    相关文章

      网友评论

        本文标题:WeChat小程序组件与页面传值总结

        本文链接:https://www.haomeiwen.com/subject/rodncctx.html