发 帖  
原厂入驻New

请问自定义组件如何使用?

24 URL 自定义组件 组件
分享
基本用法
组件间的参数传递事件传参URL传参


0
2020-11-10 07:23:10   评论 分享淘帖 邀请回答
4个回答
  基本用法
  在根目录下创建一个 component 目录,用于存放自定义组件
  组件也是由 json、wxml、wxss、js 四个文件组成
  其中 wxml 部分没有什么特殊的地方,和页面的写法一致
  wxss 也是只对组件生效,而且 app.wxss 中的样式也不会对自定义组件生效
  在组件wxss中不应使用ID选择器、属性选择器和标签名选择器
  #a { } /* 在组件中不能使用 */
  [a] { } /* 在组件中不能使用 */
  button { } /* 在组件中不能使用 */
  .a 》 .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
  最关键的地方在于,需要在 json 中添加配置项:将 component 字段设为 true,这样才能注册这个自定义组件
  {
  “component”: true,
  “usingComponents”: {}
  }
  usingComponents字段组件里面可以引入其他组件,在页面引用组件同样也需要在json设置这个字段
  {
  “navigationBarTitleText”: “登录”,
  “usingComponents”: {
  “toast”: “。./component/Toast/toast”
  }
  }
  然后就能在登录页面的 wxml 中直接使用该组件
  
2020-11-10 14:17:45 评论

举报

组件间的参数传递


  • 组件的属性列表
    小程序的页面 pages 需要使用 Page() 来注册,而组件则需要 Component() 构造器
如果组件需要接受一个外部数据,比如一个列表组件的数据源 data,可以这么配置:

这里的** properties** 类似于 vue 中的 props,表示该对象下的属性将从外部传入
properties 可设置 type、value、observer 三个属性
其中 type 用于指定字段类型(Number,String,Array,Object,Function)
value 表示字段的默认值,observer 用于定义该字段的监听函数
在页面上调用组件的时候,直接给 data 赋值就好:<toast text=&quot;登录成功&quot;></toast>
PS:开发中应当避免使用 data 为前缀的属性名(如 data-text),这会被识别为 dataset 中的参数

  • 组件事件触发回调

// toast.wxml<view class=&quot;toast&quot; style=&quot;{{ pos }}: 60rpx&quot;>  <view class=&#39;text&#39; catchtap=&#39;_tapEvent&#39;>{{text}}</view></view>// toast.jsmethods: {    // 私有方法:以下划线为前缀命名    _tapEvent() {      //触发tap回调(子组件调用父组件的方法)      this.triggerEvent(&quot;tapEvent&quot;)    }}// 然后在login调用组件的时候用tapEvent绑定_tapEvent方法// login.wxml<toast text=&quot;登录成功&quot; pos=&quot;top&quot; bind:tapEvent=&quot;_tapEvent&quot;></toast>// login.jsmethods: {    //tab事件    _tapEvent() {      console.log(&#39;你点击了一下&#39;);    }}整个的流程是
我们在点击toast组件的时候,执行了catchtap=&#39;_tapEvent&#39;方法,这个方法用了this.triggerEvent(&quot;tapEvent&quot;),这种是类似广播或者是说自定义事件,触发了在login调用toast组件里面绑定的事件bind:tapEvent并执行了login.js里面定义的方法_tapEvent

  • 组件插槽(具名插槽)
    小程序的组件也可以使用 <slot> 来扩展内容
    然后父组件引入这个组件的时候,可以在组件中插入节点,节点内容会渲染到 <slot> 节点的位置
组件默认只能有一个 <slot>,如果需要添加多个插槽,首先需要在组件 js 中声明,这就是具名插槽。比较建议使用这个,因为很容易辨识你加入的节点会渲染指到那个<slot>里面

<view class=&#39;wx_dialog_container&#39; hidden=&quot;{{!isShow}}&quot;>    <view class=&#39;wx-mask&#39;></view>    <view class=&#39;wx-dialog&#39;>        <slot name=&quot;title&quot;></slot>        <view class=&#39;wx-dialog-content&#39;>{{ content }}</view>        <view class=&#39;wx-dialog-footer&#39;>          <view class=&#39;wx-dialog-btn&#39; catchtap=&#39;_cancelEvent&#39;>{{ cancelText }}</view>          <view class=&#39;wx-dialog-btn&#39; catchtap=&#39;_confirmEvent&#39;>{{ confirmText }}</view>        </view>    </view></view><dialog id=&quot;dialog&quot; title=&#39;提示&#39; content=&quot;{{quickData}}&quot; bind:cancelEvent=&quot;_cancelEvent&quot;   bind:confirmEvent=&quot;_confirmEvent&quot;>    <view class=&#39;wx-dialog-title&#39; slot=&quot;title&quot;>温馨提示</view>  </dialog>这样使用插槽之后title就可以随意在父组件进行修改,甚至设置其他元素,输入框、按钮、icon都是可以的
2020-11-10 14:19:06 评论

举报

事件传参

在view中 ,我们用bindtap绑定了showDia方法,并且自定义data-name属性(使用过JQ的人会知道这种方法跟JQ的自定义属性取值是一样的)

<view class=&quot;float-item&quot; wx:for=&quot;{{quick}}&quot; wx:key=&quot;*this&quot; data-name=&quot;{{item}}&quot; bindtap=&#39;showDia&#39;>        <view class=&quot;icon&quot;></view>        {{ item }}</view>// 然后通过e.currentTarget.dataset可以拿到自定义的值showDia(e) {    console.log(e.currentTarget.dataset.name) },这时候大家就可以看到上面说的,避免使用data作为前缀的属性名的原因了,
,data作为前缀的属性名会被dataset识别,混搅到自定义属性取值的使用
这里还有注意两点:
1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。data-* 属性中不可以存放对象。
2、注意打印结果中target和currentTarget的区别。
- target 触发事件的源组件。
- currentTarget 事件绑定的当前组件。
2020-11-10 14:19:19 评论

举报

URL 传参

如果需要页面跳转,那么就可以使用 navigateTo() 方法或者使用navigator标签的url属性 跳转页面,这样可以在 url 后面接 query 参数

wx.navigateTo({   url: &#39;../login/login?source=index&#39;})// 或者<navigator url=&quot;{{item.url + &#39;?name=&#39; + item.name}}&quot;></navigator>然后在 Page 页面的生命周期函数 onLoad 中可以接收到这些参数

onLoad: function (options) {    console.log(options) }
这种方式只能通过 navigateTo方法或者navigator 标签发送,onLoad 接收
所以只能用于跳转到非 tabbar 的页面
2020-11-10 14:19:27 评论

举报

只有小组成员才能发言,加入小组>>

322个成员聚集在这个小组

加入小组

创建小组步骤

关闭

站长推荐 上一条 /9 下一条

快速回复 返回顶部 返回列表