小程序组件传值今天复习一下小程序的组件传值父传子首先我们需要在父组件的js里面的usingComponents里面引入子

今天复习一下小程序的组件传值

首先我们需要在父组件的js里面的usingComponents里面引入子组件前面是自定义组件名称，后面是路径

{
  "usingComponents": {
    "Text":"../../public/test/test"
  }
}

然后在父组件里面引入Text，我们可以在子组件的标签上进行传值

<Text  str = "{{str}}" String="hello world" >
</Text>

str是动态传参，是在父组件的js里面的data中定义的

Page({
  data: {
    str:'我是父组件传的值'
  }
})

而tranString是传的固定的一个死值不管是在data里面传值，还是固定传值都需要在子组件的js文件里面的properties属性里面定义接受的类型

  properties: {
    str:{
        type:'String'
    },
    String:{
      type: 'String'
    }

然后在子组件的wxml里面就可以使用

<view>{{str}}</view>
<view>{{tranString}}</view>

这边用事件方式进行传值给子组件一个标签一个bindtap事件

<view bindtap="add">向父组件传值</view>

在子组件的methods里面通过this.triggerEvent方法来进行传值第一个参数是方法名，是在父组件进行监听的,第二个是需要传的值

methods: {
    add(){
      this.triggerEvent("chuanzhi",'我是子组件穿的值')
    }
  }

在父组件里面的子组件上监听子组件传的方法第一个处理事件的方法名，第二个是在子组件定义的方法名

<Text  bindchuanzhi='chuanzhi'>

</Text>

然后在父组件的js里面可以直接监听到我们上面处理事件的方法名

 chuanzhi(e){
    console.log(e.detail)
  }

这样就实现了子传父