微信小程序父子组件通信

最新推荐文章于 2023-03-25 16:04:05 发布

渣渣前端

最新推荐文章于 2023-03-25 16:04:05 发布

阅读量407

点赞数

分类专栏：前端文章标签：微信小程序

本文链接：https://blog.csdn.net/dtbk123/article/details/102746272

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

首先是父组件传值给子组件

//子组件.wxml
<text>{{name}}</text>
//子组件.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:String
  },

  /**
   * 组件的初始数据
   */
  data: {
  
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

//父组件.wxml
<view class="container">
<Head name="{{motto}}" bindevent="on"></Head>
  
</view>

//父组件.json
{
  "component": true,
  "usingComponents": {Head:'子组件路径'}
}

//父组件.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  
  },

  /**
   * 组件的初始数据
   */
  data: {
    motto:'父组件的数据'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

子组件传值给父组件

//父组件.wxml
<view class="container">
<Head name="{{motto}}" bindevent="on"></Head>
</view>

//父组件.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
   
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
      on:function(e){
       console.log(e.detail)//打印子组件数据
      }
  }
})

//子组件.wxml
<text>{{name}}</text>
<button bindtap="click">点击</button>//触发函数

//子组件.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:String
  },

  /**
   * 组件的初始数据
   */
  data: {
    count:1
  },

  /**
   * 组件的方法列表
   */
  methods: {
      click:function(){
        this.triggerEvent('event',{name:'xxx'})
      }
  }
})