微信小程序自定义组件开发即组件间通信详解

自定义组件开发

1.我的工程目录
pages
components
自定义组件
2.定义一个组件名称为toast(目录下文件与页面开发一样.js .wxml .wxss .json文件)
在自定义组件的json配置文件中(我这里是toast.json)配置“component”: true (代表为自定义组件,其他页面方可调用)
3.<view class= 'conti'> <button bindtap='clickYes' size='mini' style="{{backgroundColor ?'background-color:red':'background-color:yellow'}}">{{color}}yes</button> <button bindtap='clickNo' size='mini'>no</button> <slot name='top'></slot> </view>
这是在自定义组件中配置的文本内容(节点内容下面会介绍)
4.在自定义组件中的Component构造器中配置相应内容

Component({
  options: {
    multipleSlots: true //在组件定义时的选项中启用多slot支持
  },
  properties: {// 自定义组件中的一些变量
    isHeader: {
      type: String,
      value: '这是一个头部的组件', //变量的默认值:当父组件中没有定义改变量的内容 自定义组件中会显示其默认值
      // clickHeader() {
      //   console.log("这是点击了一下头部组件")
      // }
    },
    backgroundColor: { // 这里的backgroundcolor为了展示修改自组件中的背景颜色
      type: Boolean,
      value: true
    },
    color: { //这里是为了修改自定义组件中的内容
      type: String,
      value:'红色' //默认值 当父组件没有定义该值的时候显示默认值
    }
  },
  data:{
    backgroundColor: true. //设置默认值使自定义组件中的背景颜色默认为红色
  },
  methods:{// 这里放着自定义组件中的方法
    clickYes(){
      let clickYes = {
        age: 18,
        name: 'jack'
      }
      this.triggerEvent('clickYes', clickYes) //重点this.triggerEvent用来导出自定义组件中的方法和方法中定义的值
    },(第一个参数是定义的方法名称,第二个参数是定义的值)
    clickNo(){
      console.log("点击了no")
    },
    //父组件调用子组件获取子组件事件中的event
    getuser(e){
      this.triggerEvent('getuser',e)
    }
  }
})

4.在父组件中调用该子组件

{
  "enablePullDownRefresh":true,
  "usingComponents": {
    "header": "../components/header/header",
    "toast":"../components/toast/toast"
  }
}

5.在父组件中定义子组件中properties值和接受子组件中定义的方法

<toast bind:clickYes = 'clickYes' 
bind:myevent = 'clickNo'  
backgroundColor = "{{backgroundColor}}"
color = "{{color}}"
bind:getuser = 'getuser'
>
  <!-- <view slot = 'top'>长路漫漫</view>
  <view slot = 'bottom'>当慎独,当克己</view> --> //这里介绍子组件中的<slot/>
</toast>

//官方解释：在组件模板中可以提供一个节点，用于承载组件引用时提供的子节点
其实就是在自组件中插入一个节点,使我们在父组件中使用自组件时可以插入其他业务内容，子组件默认可以插入一个节点,如果需要多个节点的话需要在子组件中的componets构造器中的multipleSlots属性标记为true,且多个节点中需要用name用来区分,在父组件中用对应的name值放置节点
6.在父组件中调用

  clickYes(e){
    console.log(e.detail,"这里是父组件调用子组件")
    let {name,age} = e.detail
    console.log(name,age,)

    this.setData({
      backgroundColor: !this.data.backgroundColor,
      color: `${this.data.backgroundColor == true ? '黄色 ': '红色'}` //模版字符串绑定表达式
    })
  },

这样就是完整的自定义组件的调用
7.自定义组件中的通信
比如在项目中会遇到父组件同时调用a组件和b组件,且a组件潜逃b组件如何做到a组件和b组件的通信呢？
<自定义组件a>
<自定义组件b></自定义组件b>
</自定义组件a>//这里不要忘了在自定义组件a中插入节点
首先同时在父组件json文件中声明a,b自定义组件的使用

{
 "usingComponents": {
  "page": "../components/page/page",
  "footer": "../components/footer/footer"
  }
}

关键点：在自定义组件a和自定义组件b的compontes构造器中要同时声明relations属性
自定义组件a的js文件:

  relations: {
    '../footer/footer': {
      type: 'child',
      linked: function (target) { }, // target是组件footer的实例，
      linkChanged: function (target) { },
      unlinked: function (target) { }
    }
  } ,

同时在自定义组件a中定义一个clickBrother方法用来获取自定义组件b中的值并修改

  methods:{
    clickBrother(e){
      let nodes = this.getRelationNodes('../footer/footer')
    console.log(nodes[0].data.color)
    nodes[0].setData({
      color: true
    })
    nodes[0].data.color = true
    }
  } 
  在组件a中使用 this.getRelationNodes(组件地址)的方式获取到b组件的实例,通过修改组件b中的color值改变颜色

自定义组件b的js文件

Component({
  properties: {
    name: {
      type: String,
    }
  },
  data: {
    page: '这是footer页面',
    color: false
  },
  relations: {
    '../page/page': {
      type: 'parent',
      linked: function (target) { }, // target是组件page的实例，
      linkChanged: function (target) { },
      unlinked: function (target) { }
    }
  },
})

自定义组件b的wxml文件：

<text class= 'footer' style = "{{color?'color:red':'color:green'}}">这是脚部文件</text> //这里要通过a组件修改b组件中的内容

总结：以上就是自定义组件的开发和组件之间的通信过程,会了这些内容，面对工作中的日常开发组件问题都会迎刃而解，因为时间比较紧也许部分细节内容介绍的不是特别清楚，包括组件中的behaviors(…类似于一些编程语言中的“mixins”或“traits”，网上科普的资料太少，官方文档介绍的也不是很清楚，所以就没有做详细的接受(主要还是不会—> ),等有时间深入了解一下再给大家做梳理)，好了今天就这么多！

微信小程序自定义组件开发即组件间通信详解

猜你喜欢