最近尝试学习微信小程序:
微信小程序中重要开发环节,组件.在这里说的是自定义组件;(其实也就是跟普通组件没有什么区别),
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:完成数据传递.
请发表评论