微信小程序中组件间通信的三种方式

事先准备

创建一个项目够 修改目录下的app.json，在pages中注册页面 ，同时新增test1组件 也在app.json中注册为全局组件 并命名为my-test

app.json 配置

{
          
   
  "pages":[
   "pages/home/home",
   "pages/my/my",
   "pages/cart/cart"
  ],
  "tabBar": {
          
   
    "list": [
      {
          
   
      "pagePath":  "pages/home/home",
      "text": "首页"
    },
    {
          
   
      "pagePath":  "pages/my/my",
      "text": "我的"
    }
  
  ]
  },
  "window":{
          
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
          
   
    "my-test":"components/test1/test1"
  }
}

1、父向子传递数据

例：小程序的home页面要向自定义组件 my-test中 传递 my-test组件计算的初始值 preValue

Home组件

js中：

// pages/home/home.js
Page({
          
   
    data: {
          
   
        preValue:1000
    }
})

wxml: 引用my-test组件 左边为子组件要接收的变量名 ，右边为自己要传递的变量值

<my-test preVal="{
           
    {preValue}}"></my-test>

test1组件

js中：（注意不同：接收的参数 可读可写）

// components/test1/test1.js
Component({
          
   
    properties: {
          
   
        preVal:{
          
   
            type:Number,
            value:0
        }
    },
    data: {
          
   
        info:"这是一个组件"
    },
    methods: {
          
   
        addOne(){
          
   
            this.setData({
          
   
                preVal:this.data.preVal+1
            })
        }
    }
})

wxml中：

<view>
	{
         
  {preVal}}
</view>
<button bindtap="addOne">
+1
</button>

2、子组件向父组件传递数据

例：在上面例子的基础上 ，父组件中也显示子组件中计算的值 每次点击按钮 子组件计算完后 也要将数据回传给父组件显示

父组件中定义接收参数能给自身变量赋值的函数 传递给子组件 。子组件通过 this.triggerEvent(接收到的函数名,{value:要传递的值})

Home页面

js:

// pages/home/home.js
Page({
          
   
    data: {
          
   
        preValue:1000,
        sonVal:0
    },
    setSonVal(e){
          
   
    //    console.log(e);
    this.setData({
          
   
        sonVal:e.detail.value
    })
    }
})

wxml:

<my-test preVal="{
           
    {preValue}}" bind:toSendValue="setSonVal"></my-test>
<view wx:if="{
           
    {sonVal===0?false:true}}">子组件的计算值{
         
  {sonVal}}</view>

子组件test1

在方法中添加一行

methods: {
          
   
        addOne(){
          
   
            this.setData({
          
   
                preVal:this.data.preVal+1
            })
            this.triggerEvent(toSendValue,{
          
   value:this.data.preVal})
        }
    }

3、子父之间通过组件选择器任意传值

可在父组件里调用 this.selectComponent(“id或class选择器”) ，获取子组件的实例对象，从而直接访问子组 件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(“.my-component”)

同第一个例子：小程序的home页面要向自定义组件 my-test中 传递 my-test组件计算的初始值 preValue 同时将子组件的值传递回父组件

Home

// pages/home/home.js
Page({
          
   
    
    data: {
          
   
        preValue:1000,
        sonVal:0
    },
    toSonVal(){
          
   
        const child=  this.selectComponent(".my_test");
        child.changePreVal(1000);
        this.setData({
          
   
            sonVal:child.data.preVal
        })
    }
})

<!--pages/home/home.wxml-->

<my-test  class="my_test"></my-test>
<button bindtap="toSonVal">向子组件传值</button>
<view>子组件的值 {
         
  {sonVal}}</view>

test

// components/test1/test1.js
Component({
          
   
    properties: {
          
   
      
    },
    data: {
          
   
        preVal:0
    },
    methods: {
          
   
        // 定义给父组件调用的方法
        changePreVal(e){
          
   
            console.log(调用);
            this.setData({
          
   
                preVal:e
            })
        }
    }
})

通过 this.selectComponent（）比较灵活