小程序的父子之间的传值调用

前言：

      我们在小程序中父子组件之间的传值方法。

目录:

父传子 ：properties

步骤：

1、在父组件 index.wxml里面给调用子组件的地方绑定一个字段map

2、在父组件 index.js中定义字段map,并用this.setData改变这个值

3、在子组件 map.js中定义properties接收我们绑定的值

4、在子组件 map.js中通过this.data.map调用properties的字段

父调子方法

1、在父组件 index.wxml里面给调用子组件的地方添加id名

2、index.js中些调用方法，  跟vue的ref有点类似

子传父： triggerEvent

步骤：

1、在子组件 map.wxml 里面写按钮调用事件

2、在子组件 map.js 里面写方法，并将数据 123提交上去

3、在父组件 index.wxml 里面接收事件

4、在父组件 index.js 中定义abc方法

官网api:

---

父传子 ：properties

步骤：

1、在父组件 index.wxml里面给调用子组件的地方绑定一个字段map

 <b-map map="{{map}}"></b-map>

2、在父组件 index.js中定义字段map,并用this.setData改变这个值

Page({
    data: {
        map:'',//定位信息

    },
    onLoad: function(params){
        var app = getApp();
        let map = app.globalData.map;
        if(map){
            this.setData({
                map:map,
                now_position:map.title,
            })
        }

    },


...

3、在子组件 map.js中定义properties接收我们绑定的值

Component({
  properties:{
    map:Object
  },
...

4、在子组件 map.js中通过this.data.map调用properties的字段

 let map = this.data.map;

父调子方法

1、在父组件 index.wxml里面给调用子组件的地方添加id名

 <b-map id="bmap" map="{{map}}"></b-map>

2、index.js中些调用方法，  跟vue的ref有点类似

 this.selectComponent(' ')  获取到 id为 bmap 的这个元素

setNowPostion() 子组件的方法

this.selectComponent('#bmap').setNowPostion();

子传父： triggerEvent

步骤：

1、在子组件 map.wxml 里面写按钮调用事件

<view bindtap="aaa">
    <button>子调用父的方法</button>
</view>

2、在子组件 map.js 里面写方法，并将数据 123提交上去

 aaa: function(){
      this.triggerEvent('abc',123);
    },

3、在父组件 index.wxml 里面接收事件

<b-map map="{{map}}" bind:abc="abc"></b-map>

4、在父组件 index.js 中定义abc方法

Page({ 
    abc(res){
        let data = res.detail;
        debugger
    }
...

官网api:入口

组件间通信

组件间的基本通信方式有以下几种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

监听事件

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。关于事件的基本概念和用法，参见 事件 。

监听自定义组件事件的方法与监听基础组件事件的方法完全一致：

代码示例：

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

代码示例：

在开发者工具中预览效果

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

触发事件的选项包括：

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

关于冒泡和捕获阶段的概念，请阅读 事件 章节中的相关说明。

代码示例：

在开发者工具中预览效果

// 页面 page.wxml
<another-component bindcustomevent="pageEventListener1">
  <my-component bindcustomevent="pageEventListener2"></my-component>
</another-component>

// 组件 another-component.wxml
<view bindcustomevent="anotherEventListener">
  <slot />
</view>

// 组件 my-component.wxml
<view bindcustomevent="myEventListener">
  <slot />
</view>

// 组件 my-component.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
      this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1
    }
  }
})

获取组件实例

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。（插件的自定义组件将返回 null）

调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

selector 详细语法可查看 selector 语法参考文档。

代码示例：

在开发者工具中预览效果

// 父组件
Page({
  data: {},
  getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
  }
})

在上例中，父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this 。

若需要自定义 selectComponent 返回的数据，可使用内置 behavior: wx://component-export

从基础库版本 2.2.3 开始提供支持。

使自定义组件中支持 export 定义段，这个定义段可以用于指定组件被 selectComponent 调用时的返回值。

代码示例：

在开发者工具中预览效果

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})

<!-- 使用自定义组件时 -->
<my-component id="the-id" />

// 父组件调用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

在上例中，父组件获取 id 为 the-id 的子组件实例的时候，得到的是对象 { myField: 'myValue' } 。

到此结束！