一、父组件向子组件传值

1、创建一个子组件child文件夹

2、在父组件的json文件里面引入

{
  "usingComponents": {
    "my-child": "./child"
  }
}

3、父组件里面引入

<my-child  childlist="{{list}}"></my-child>

4、子组件,wxml中直接按照data的使用方式{{childlist}}来使用

Component({
  properties: {
    childlist: {
      type: Array,
      value: [],
    },
  },
  data: {
    // 这里是一些组件内部数据
  },
  methods: {
    // 这里是一个自定义方法
  },
  attached: function () {
      console.log(this.properties.childlist) //可以获取父组件传过来的值
  },
})

二、子组件向父组件传值

1、子组件传值时,使用triggerEvent传给父组件一个事件( myevent ),并传递想要给父组件的值( sonParam )

this.triggerEvent('myevent', dataList)

2、在父组件中,子组件的引用处,通过这个myevent事件绑定一个方法( onMyEvent )

<my-child bind:myevent="onMyEvent"></my-child>

 3、在父组件的js中,定义这个方法onMyEvent,在这个方法内就可以获取到子组件传递过来的值

onMyEvent: function(e) {
    let list = e.detail.dataList
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐