阅读 24

微信小程序开发(七)-自定义组件

一 . 

类似vue或者react中的自定义组件
 
1. 创建?定义组件
类似于页面,一个自定义组件由 json,wxml,wxss,js,4个文件组成
在?件夹内 components/myHeader,创建组件 名为 myHeader
 
2.声明组件
 
?先需要在组件的 json?件中进??定义组件声明
myHeader.json

{
  "component": true
}

3. 注册组件

在组件的 js?件中,需要使? Component()来注册组件,并提供组件的属性定义、内部数据和?定义?法
 
myHeader.js


Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
   }
 },
  data: {
    // 这里是一些组件内部数据
    someData: {}
 },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
 }
})

4.声明引??定义组件

?先要在??的 json?件中进?引?声明。还要提供对应的组件名和组件路径
 
index.wxml

 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

5.??中使??定义组件


  
  
    用来替代slot的
    

6.定义段与?例?法

Component构造器可?于定义组件,调? Component构造器时可以指定组件的属性、数据、?法等。
 
 
7.组件-?定义组件传参
1. ?组件通过属性的?式给?组件传递参数
2. ?组件通过事件的?式向?组件传递参数
过程:
1. ?组件 把数据 {{tabs}}传递到 ?组件的 tabItems属性中
2. ?组件 监听 onMyTab事件
3. ?组件 触发 bindmytap中的 mytap事件
  a,?定义组件触发事件时,需要使? triggerEvent?法,指定 事件名、 detail
4. ? -> ? 动态传值 this.selectComponent("#tabs");
?组件代码
// page.wxml

 内容-这里可以放插槽

// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },

  

子组件代码

// com.wxml

  
    
      {{item.name}}
    
  
  
    
  

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent(‘mytap‘,‘haha‘);
   }
 }
})

  

原文:https://www.cnblogs.com/feifan1/p/12817120.html

文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐