wx小程序组件的使用（2）

目录

一、插槽

二、父传子、子传父

三、selectComponent 获取组件实例

四、behaviors

---

一、插槽

1. 在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构

我们可以通过使用插槽来提高结构的灵活度，

但是注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽 

如果我们需要使用多个插槽时，一定要在options中开启允许多个插槽multipleSlots: true

//父组件
  <view slot="one">
    我是插槽1
  </view>
  <view slot="two">
    我是插槽2
  </view>


//子组件
<slot name="one"></slot>
<slot name="two"></slot>


//子组件js
options: {
    multipleSlots: true
  },

---

二、父传子、子传父

1. 父子组件通信的方式

2. 属性绑定

   • 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据(只能传递数据，不能传递方法)

3. 事件绑定

   • 用于子组件向父组件传递数据，可以传递任意数据(包括数组和方法)

4. 获取组件实例

   • 父组件还可以通过 this.selectComponent() 获取子组件实例对象这样就可以直接访问子组件的任意数据和方法

• 父传子通过 属性绑定 来实现

//父组件
<my_text uname="{
   
   {uname}}">
  <view slot="one">
    我是插槽1
  </view>
  <view slot="two">
    我是插槽2
  </view>
</my_text>


//子组件通过properties接收就可以使用了
  properties: {
    uname: {
      type: String,
      value: '啊啊啊'
    }
  },

• 子传父

在 子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', {/* 参数对象 */})，将数据发送到父组件

在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

//父组件

//html
<my_text uname="{
   
   {uname}}" bind:updataUname="updataUname">
  <view slot="one">
    我是插槽1
  </view>
  <view slot="two">
    我是插槽2
  </view>
</my_text>

//js
 updataUname(e) {
    this.setData({
      uname: e.detail.value
    })
  },


//子组件

//html
<button type="primary" bindtap="updataUname">
我要改老爹的数据了
</button>

//js
 updataUname(){
      this.triggerEvent('updataUname',{value:'我来了'})
    },

三、selectComponent 获取组件实例

在父组件里调用 this.selectComponent("id或class选择器")，获取子组件的实例对象，

从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，

例如 this.selectComponent(".my-component")

//html
<my_text uname="{
   
   {uname}}" class="text" bind:updataUname="updataUname">
  <view slot="one">
    我是插槽1
  </view>
  <view slot="two">
    我是插槽2
  </view>
</my_text>

<button bindtap="getTexts"> 
拿到text的实例
</button>


//js
  getTexts() {
    const text = this.selectComponent('.text')
    text.updataUname()
  },

---

四、behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 mixins

• 每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和 方法会被合并到组件中

• • 每个组件可以引用多个 behaviors ， behaviors 也可以引用其它 behaviors

• 只有当组件共享的代码(数据、方法)，就可以使用 behaviors 来共享，如果是组件私有的代码，就不需要放在behaviors 中

调用 behaviors(Object object) 方法即可创建一个 共享的 behaviors 实例对象，供所有的组件使用 

// my-behaviors.js
module.exports = Behavior({
  data: {
    hobby: '打篮球'
  },
  methods: {
    sayhobby() {
      console.log(this.data.hobby);
    }
  }
})


//组件中通过  behaviors: [res], 引入使用
 behaviors: [res],

 getBehaviors() {
    console.log(this.data.hobby);
    this.sayhobby()
  },

定义段	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数