微信小程序的父子组件传值

微信小程序的父子组件传值

如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。

下面介绍父子组件的数据传递方法，以及一个简单的组件和一个复杂的组件示例。

 

二、父子组件传递数据的方法

1.父组件向子组件传递数据

parent.wxml

<my-component name="{
  {name}}" age="{
  {age}}"></my-component>

parent.js

 

data: {
  name: 'Peggy',
  age: 25
}

 child.js

properties: {
  name: {
    type: String,
    value: '小明'
  },
  age: Number
}

父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{ {name}}的形式使用，而在js中以this.properties.name获取。

2.子组件向父组件传值

child.js

methods: {