mPaas_父子组件通信

mPaas_父子组件通信

1. 父传子

props

• props 为外部传过来的属性，可指定默认属性，不能在自定义组件内部代码中修改。
• 自定义组件的 axml 中可以直接引用 props 属性。
• 自定义组件的 axml 中的事件只能由自定义组件的 js 的 methods 中的方法来响应， 如果需要调用父组件传递过来的函数，可以在 methods 中通过 this.props 调用。

父组件：

// /components/father/father.axml

<view>我是父组件</view>
<view> {{name}}</view>
// 将父组件data中的name和 自定义的参数传给子组件
<son faName="{{name}}" job="driver"></son>

// /components/father/father.js  

Component({
  data: { name: '吴彦祖' },
});

// /components/father/father.json

{
  "component": true,
   // 引入子组件的路径（json文件里不允许有注释）
  "usingComponents": {
    "son":"/components/son/son"
  }
}

子组件：

// /components/son/son.axml

<view>我是子组件</view>
// props接收的属性可以直接使用
<view>{{faName}}----{{job}}</view>

// /components/son/son.js

Component({
  props: {
      // 用props接收并定义类型 （也可以设置默认值）
    faName:String,
    job:"teacher"
  },
});

// /components/son/son.json
 
"component": true

2. 子传父

props

父组件定义一个方法（接收参数），将该方法通过props传给子组件。

子组件通过props进行接收，子组件触发一个事件函数 用this.props.函数名（参数）对父组件传过来的函数进行调用

注意：

• 自定义组件的 axml 中的事件只能由自定义组件的 js 的 methods 中的方法来响应， 如果需要调用父组件传递过来的函数，可以在 methods 中通过 this.props 调用。
• 如果传递参数是函数，一定要以 on 为前缀，否则会将其处理为字符串。

父组件：

<view>我是父组件--- {{age}}</view>
<son onChangeAge="changeAge"></son>

Component({
  data: { name: '吴彦祖' },
  methods:{
      changeAge(num){
          this.setData({
              age:this.data.age+num
          })
      }
  }
});

{
  "component": true,
  "usingComponents": {
    "son":"/components/son/son"
  }
}

子组件:

<view> 我是子组件</view>
// 点击按钮触发一个事件函数

<button size="default" type="primary" onTap="clickHand">子传父测试</button>

Component({
  data: { num: 5 },
  props:{
      // 接收传过来的事件 并附上默认值
      onChangeAge:()=>{console.log(111);}
  } 
  methods:{
      // 自定义的事件函数
      clickHand(){
          // 触发props中的函数 并把参数传过去
        this.props.onChangeAge(this.data.num)
      }
  }
});

{
  "component": true
}

3. 状态提升

将组件或页面要使用的数据 存放在app实例中。各组件或者页面要使用数据时，用getApp()方法调用实例 ，进而调用全局的方法

app.js

App({
    golbalData:{
        name:'吴彦祖',
        age:18
    }
})

xx组件/页面.js

// 获取小程序的实例
var app=getApp()
Component({
    didMount(){
        console.log(app.golbalData)
    }
})