内容简介:自定义组件的具体创建方法,了解原理之前,我们来看一下自定义组件中的js构造器:以上包括了自定义组件的逻辑部分内容,开发者可以在Component构造器的各个生命周期回调函数中,编写自己的逻辑代码。
自定义组件的具体创建方法, hello world
示例,请参考智能小程序官网: smartprogram.baidu.com/docs/develo…
了解原理之前,我们来看一下自定义组件中的js构造器:
Component({ properties: { }, data: {}, attached: function () {}, methods: {} }); 复制代码
以上包括了自定义组件的逻辑部分内容,开发者可以在Component构造器的各个生命周期回调函数中,编写自己的逻辑代码。
在 Component
构造器中写的自定义组件的原型,运行在小程序的逻辑层(jscore)中,并不与自己的 swan
模板运行在一起-- swan
模板运行在视图层(webview)中。
所以,setData等操作,都是通过数据通讯,将要设置的数据传递到真正的视图层,然后进行自定义组件的渲染。同理,所有的生命周期,也是当组件的模板在视图层渲染完毕之后,传递回逻辑层进行触发的。
所以对于setData的调用,也如同页面的setData一样,需要谨慎调用。因为每一次setData都意味着一次jscore与webview的数据通讯。
类 or 累?
看过自定义组件基本使用方法的同学肯定知道,自定义组件内使用的样式类是独立空间,即: 组件模板中使用的css样式类并不会应用上使用该自定义组件的页面上的样式类。
emmmmm,如果上面那句话把你绕晕了,我们来看一下例子:
// page.css .page-class { background: #0f0; height: 100px; width: 100px; } 复制代码
// page.swan <view> <view class="page-class"></view> <mycomp></mycomp> </view> 复制代码
// mycomp.swan <view> <view class="page-class"></view> </view> 复制代码
展示效果如下: ![图片]( agroup-bos.cdn.bcebos.com/51486aa7964… =200x370)
我们可以看到,虽然都是渲染到同一个页面上,但是页面上定义的样式类,在组件中并没有生效。
那么同样的,在组件中定义的类,也不会透出去,影响整个页面,例:
// page.swan <view> <view class="page-class"></view> <mycomp></mycomp> </view> 复制代码
// mycomp.css .page-class { background: #0f0; height: 100px; width: 100px; } 复制代码
// mycomp.swan <view> <view class="page-class"></view> </view> 复制代码
效果如下: ![图片]( agroup-bos.cdn.bcebos.com/142f3e35f1e… =200x370)
那么这个“隔离“是如何做到的呢? 我们仔细观察一下自定义组件最后生成的模板,和样式:
真相大白,原来是自定义组件中使用的样式类,都被编译增加了前缀。这才使内外的类可以互相隔离。这种设计也有好处也有缺点,好处就不用再想之前用很多框架那样自己去寻找解决方案(如:CSSinJS或css modules)自定义组件中直接集成了内置解决方案。坏处就是可能有些css上的使用限制,比如(摘自官网):
这块也请读者在开发过程中多注意。
TIPS: 关于css的解决方案,官方貌似还在持续优化,相信不久就可以迎来限制更小的集合了。
组件间的通讯
父子自定义组件之间,可以使用两种方式进行通讯:
- 利用自定义事件
- 利用dispatch消息
利用自定义事件
利用自定义事件在父组件中进行事件的绑定,在子组件中进行自定义事件的派发。 例:
// 父组件的swan中 <view> <component-tag-name bindmyevent="onMyEvent" /> </view> 复制代码
// 父组件的Component Component({ methods: { onMyEvent: function (e) { console.log('I got message:', e); } } }); 复制代码
// 子组件的Component Component({ attached: function () { this.triggerEvent('myevent', {message: 'you got?'}); } }); 复制代码
dispatch消息
通过 dispatch 方法,组件可以向组件树的上层派发消息。消息将沿着组件树向上传递,直到遇到第一个处理该消息的组件,则停止。通过 messages 可以声明组件要处理的消息。messages 是一个对象,key 是消息名称,value 是消息处理的函数,接收一个包含 target(派发消息的组件) 和 value(消息的值) 的参数对象。 (摘自san官网)
如果组件有消息需要一直向上透传,则可以使用这个方法,只要没有组件组件拦截,消息则会一直向上传递。
例:
// 根组件 Component({ messages: { 'childmessage': function (e) { console.log('childmessage', e); } } }); // 父组件 Component({}); // 子组件 Component({ created() { this.dispatch('childmessage', { name: 'swan' }); } }); 复制代码
其中根组件中使用了父组件,父组件中使用了子组件。当子组件调用 dispatch
方法时,则会一直传递到根组件上(因为父组件并没有message消费本次dispatch)。
至于父组件想通知子组件嘛,可以通过props的改变,来触发子组件。
通过上述两种方式均可以实现父子组件的通讯,当然,各位读者也可以试试自己引入事件流,或者其他三方库,来丰富自己的应用通讯方式。 以上~~~~~~~~ 周末啦,祝大家都有个不用加班的周末!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 智能小程序档案馆 —— 聊一聊 web-view 组件
- 智能小程序档案馆——远程调试
- 小程序档案馆–支付能力(一)
- 智能小程序档案馆——登录授权
- 智能小程序档案馆——埋点统计
- 智能小程序档案馆——真机调试
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。