用旧手机做网站,福州便民生活网,小程序api的使用,企业邮箱注册申请需要钱吗自定义组件 插槽1、什么是插槽2、单个插槽3、定义多个插槽 父子组件之间的通信1、父子组件之间的通信的3种方式2、事件绑定3、behaviors 插槽
1、什么是插槽
在自定义组件的wxml结构中#xff0c;可以提供一个solot 节点#xff08;插槽#xff09;#xff0c;用… 自定义组件 插槽1、什么是插槽2、单个插槽3、定义多个插槽 父子组件之间的通信1、父子组件之间的通信的3种方式2、事件绑定3、behaviors 插槽
1、什么是插槽
在自定义组件的wxml结构中可以提供一个solot 节点插槽用于承载组件使用者提供的wxml结构
2、单个插槽
在小程序中默认每个自定义组件中只允许使用一个slot进行占位这种个数上的限制叫做单个插槽。
view classwrapperview这里是组件的内部节点/view!-- 对于不确定的内容可以使用solt进行占位具体内容有组件的使用者决定 --slot/slot
/view!-- 组件的使用者 --
component-tag-name!-- 这部分内容将被放置在组件的使用者决定 --view这里是插入到组件的slot的内容/view
/component-tag-name3、定义多个插槽
view classwrapper!-- name为before的第一个slot插槽 --slot namebefore/slot!-- name为after的第一个slot插槽 --slot nameafter/slot/view
-------------------
component-tag-name!-- 这部分内容将被放置在组件的使用者决定 --view slotbefore这里是插入到组件的before的内容/viewview slotafter这里是插入到组件的after的内容/view
/component-tag-name --父子组件之间的通信
1、父子组件之间的通信的3种方式
1.父子组件之间通信的3种方式
①属性绑定 用于父组件向子组件的指定属 性设置数据仅能设置JSON兼容的数据 ②事件绑定 用于子组件向父组件传递数据 可以传递任意数据 ③获取组件实例 父组件还可以通过 this.selectComponent()获取子组件实例对象, 这样就可以直接访问子 组件的任意数据和方法 2、事件绑定
事件绑定用于实现子向父传值可以传递任何类型的数据。 ①在父组件的js中,定义一个函数这个函数即将通过自定义事件的形式传递给子组件
//再父组件中定义syncCount方法//将来这个方法会被传递给子组件使子组件进行调用syncCount(){console.log(syncCount);},②在父组件的wxml中,通过自定义事件的形式将步骤1中定义的函数引用传递给子组件
!-- 使用bind:自定义事件名称 --my-test3 count{{count}} bind:syncsyncCount/my-test3
!-- 或者使用bind后面直接写上自定义事件名称 --
my-test3 count{{count}} bindsyncsyncCount/my-test3③在子组件的js中,通过调用this.triggerEvent(自定义事件名称’, {/*参数对象*/})将数据发送到父组件
addCount(){this.setData({count:this.properties.count1})this.triggerEvent(sync,{value:this.properties.count})}④在父组件的js中通过e.detail获取到子组件传递过来的数据
syncCount(e){this.setData({count:e.detail.value})}3、behaviors behaviors是小程序中用于实现组件间代码共享的特性类似于Vue.js 中的mixins behaviors的工作方式
每个behavior可以包含- 组属性、数据、生命周期函数和方法。组件引用它时它的属性、数据和方法会被合并到组件中。
每个组件可以引用多个behavior, behavior也可以引用其它behavior.
创建behaviors
module.exportsBehavior({//属性节点properties:{},//私有数据节点data:{usernameL:zs},//事件处理函数和自定义方法节点methods:{},// /其他节点
})behavior中所有可用的节点
可用的节点类型是否必填描述propertiesobject Map否同组件的属性dataobject否同组件的数据methodsobject否同自定义组件的方法behaviorsString Array否引入其它的behaviorcreatedFunction否生命周期函数attachedFunction否生命周期函数readyFunction否生命周期函數movedFunction否生命周期函数detachedFunction否生命周期函数
同名字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名的字段对这些字段的处理方法如下
如果有同名的属性 (properties) 或方法 (methods) 若组件本身有这个属性或方法则组件的属性或方法会覆盖 behavior 中的同名属性或方法若组件本身无这个属性或方法则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法在 2 的基础上若存在嵌套引用 behavior 的情况则规则为引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。 如果有同名的数据字段 (data) 若同名的数据字段都是对象类型会进行对象合并其余情况会进行数据覆盖覆盖规则为 引用者 behavior 被引用的 behavior 、 靠后的 behavior 靠前的 behavior。优先级高的覆盖优先级低的最大的为优先级最高 生命周期函数和 observers 不会相互覆盖而是在对应触发时机被逐个调用 对于不同的生命周期函数之间遵循组件生命周期函数的执行顺序对于同种生命周期函数和同字段 observers 遵循如下规则 behavior 优先于组件执行被引用的 behavior 优先于 引用者 behavior 执行靠前的 behavior 优先于 靠后的 behavior 执行 如果同一个 behavior 被一个组件多次引用它定义的生命周期函数和 observers 不会重复执行
