父子组件传递

父组件可以通过在子组件标签上使用属性来传递参数，子组件可以通过 this.properties 获取父组件传递过来的参数。

<!--父组件-->
<child-component title="这是传递给子组件的标题"></child-component>

//子组件
Component({
  properties: {
    title: String
  }
})

父组件操作子组件中的方法

这里要说一个父组件操作子组件内部Fun的方法，通过 this.selectComponent() API实现

<!--父页面引用子组件-->
<childElement id="child"></childElement>  //子组件

//子
Component({
    methods: {
         foo() {  //f方法
             console.log("this is child's fun");
        },
    }
})
//父
let child = this.selectComponent('#child'); // 页面获取自定义组件实例
child.foo(); // 通过实例调用组件事件

子父组件传递

子组件主要通过在触发事件时使用 this.triggerEvent 方法来向父组件传递参数。

<!-- 父组件 -->
<child-component bind:myevent="onMyEvent"></child-component>
<!-- 子组件 -->
<button bindtap="onButtonClick">点击我触发事件</button>

//父组件
Page({
  onMyEvent(event) {
    console.log(event.detail.message) // 输出：这是传递给父组件的消息
  }
})

//子组件
Component({
  methods: {
    onButtonClick() {
      this.triggerEvent('myevent', { message: '这是传递给父组件的消息' })
      //触发
    }
  }
})

兄弟组件之间的参数传递

兄弟组件之间的参数传递可以通过共享一个公共的父组件来实现。

<!--父组件-->
<brother1-component title="{{title}}" bind:myevent="onMyEvent"></brother1-component>
<brother2-component message="{{message}}"></brother2-component>

//父组件
Page({
  data: {
    title: '这是传递给 Brother1 组件的标题',
    message: ''
  },
  onMyEvent(event) {
    this.setData({
      message: event.detail.message
    })
  }
})
//兄弟组件 哥哥
Component({
  properties: {
    title: String
  },
  methods: {
    onButtonClick() {
      this.triggerEvent('myevent', { message: '这是传递给 Brother2 组件的消息' })
    }
  }
})
// 弟弟
Component({
  properties: {
    message: String
  }
})

父组件通过属性传递的方式向 Brother1 组件传递了一个标题，通过事件触发的方式向 Brother2 组件传递了一个消息。Brother1 组件可以通过 this.triggerEvent 方法触发一个自定义事件来向父组件传递消息，父组件在接收到该事件时，再通过 setData 方法将消息传递给 Brother2 组件。