微信小程序 (page与Components之间的数据传递)

　　最近尝试学习微信小程序:
　　微信小程序中重要开发环节,组件.在这里说的是自定义组件;(其实也就是跟普通组件没有什么区别),

        1.先定义一个组件;假设在 /ponent/liu (分别有4个文件,跟page页面一样 liu.js | liu.json | liu.wxml | liu.wxss);

 　　liu.wxml 如下:

<text>我是组件中的数据</text>

<view class='hahaha'>
  <slot />
</view>

　　liu.js如下:

// ponent/liu/liu.js
var beha01 = require("../behavior/beha01");

Component({
  /**
   * 组件的属性列表
   */
  behaviors: [beha01],  //behaviors引入了一个behavior先不管;
  properties: {
    ajaxdata:{
      type:"String",
      value:"",
      observer:function(new_val,old_val,path){
        console.log("值变化了...")
      }
    },
    liu_value: {
      type:"String",
      value: "lhf",
      observer:function(news,olds){
        console.log(news,olds)
        this.setData({
          
        })
      }
    },
    flow:{
      type:"String",
      value:"",
      observer:function(news,olds,path){
        console.log(news,olds)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ctext:"试试把我的值传到page页面"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  ready:function(){
    console.log("liuliu组件中的数据:" ,this.data)
  }
})

　　liu.json  { "component": true",usingComponents": { }  }

       2.先说数据怎么从page流向Componnets;

　　page中的index.json如下: 标绿色的为引入配置

{
  "navigationBarBackgroundColor":"#ccc",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText":"微信小程序首页(引入自定义弹窗组件)",
  "backgroundColor":"#000000",
  "backgroundTextStyle":"dark",
  "enablePullDownRefresh":true,
  "usingComponents":{
    "my-toast":"/ponent/toast/toast",
    "liuhf":"/ponent/liu/liu"                       
  }
}

 

       page中的index.wxml如下:

  <view>下面是普通组件</view>
  
  <liuhf flow="{{flowtochild}}" bind:myevent="onMyevent" >
    <text>我是一段文字,我将被放入这个组件的slot中</text>
  </liuhf>

　<view>{{ctext}}</view>      

　　page中的index.js如下:

Page({

  data: {
    motto: '组件的开发',
    
    text:"点击我可以更给我的内容啊",

    flowtochild:"我是page的数据,我的数据直接流向组件",
　　　　
    ctext:"我的内容可以通过组件触发改变"

  },

  onReady:function(){
  },

　//定义的事件:

　onMyevent:function(e){
　　var get_text=e.detail.ctext;
   this.setData(
　　　　{"ctext":get_text}
　　)
　}

})

　　开始了,使用组件:(在index.wxml中使用);这样的; 

<liuhf flow="{{flowtochild}}">
    <text>我是一段文字,我将被放入这个组件的slot中</text>
 </liuhf>

flow的值,来自page页面;而flow这个 属性(porperty) 将对应到 liu.js(组件) properties 下的 flow;
当组件挂载完成:

ready:function(){

   console.log("liuliu组件中的数据:" ,this.data);　　　　　　//其实this.data===this.properties   ==>true;

　　 };
//结果:



3.Componnets数据流向page (通过绑定事件和触发事件传递数据) (当然最简单的一种表现就是直接在组件中塞入数据,这里其实是说的事件触发)
(示例:比如我们要改变 page中index.wxml中的 ctext这个显示的数据)
3.1 在组件的使用的地方(index.wxml)绑定事件函数 bind:myevent="onMyevent"
并在index.js 中写出具体方法: onMyevent:function(e){console.log(e)}
3.2 在组件中触发事件(liu.js): 在methods写:

methods: {

 

onTap:function(){

　　var myEventDetail = { // detail对象，提供给事件监听函数  //监听函数可以通过e.detail查看传递的数据;

　　　　hidden: false,

　　　　text: this.data.ctext   

　　}

　　var myEventOption = {

　　　

　　} // 触发事件的选项

 

　　this.triggerEvent('myevent', myEventDetail, myEventOption);

}

}

 

ok:完成数据传递.

 

 

转载于:https://www.cnblogs.com/liuliu-hai/p/9413428.html