微信小程序组件传值

 微信小程序组件传值

---

一、新建组件及在页面中引入组件

1.新建组件：点击新建文件夹，起名为 components,在这个文件夹下再新建一个文件夹任取一个名字，如child,在child里面新建Component,名字和文件夹名字相同，就出现了新的文件，组件就建好了。

 2.在父页面引入组件：以组件名新建标签<child></child>，

父页面json文件：

​
"usingComponents": {
    "child":"../../components/child/child"
  }
 
​

二、父传子

1.

在父页面写上要传的内容

<child transfer="星期四"></child>

子组件页面接收：

<view>
  传来的内容：{{transfer}}  //用{{}}来接收
</view>

结果：

 2.在子组件js写默认的内容(properties)

如果没有传值时，子组件页面会显示子组件中默认的内容

二.子传父

1.在子组件写点击事件： <button bindtap="fath">点击传给父页面</button>

2.在data里面写入要传给父页面的内容：

data: {
    // 传给父页面的内容
    number: "08051005"    //一定要加引号
  },

点击按钮传值用this.triggerEvent：

 methods: {
    // 点击fath按钮，传nubmer
    fath() {
      this.triggerEvent('fath', this.data.number)
    }
  }

3.在 父页面wxml中的 "组件标签" 添加 bind事件 ( bind + 子组件传来的方法名称="方法名" )

<child transfer="星期四" bind:fath="fath"></child>

4.然后在父页面js里面就可以log到传来的值

---

总结

组件传值并不复杂，重要的是理清思路。

1.父传子：新建子组件，在父页面引入组件，在父页面写要传的内容，在子组件接收内容{{}}，不传值时子组件默认的内容properties。

2.子传父：新建子组件，在父页面引入组件，在子组件写点击事件、 data里面写要传的内容、点击事件用方法触发（this.triggerEvent），在父页面添加bind事件接收值