小程序笔记--组件通信

这一节主要是组件通信，直接上代码

父组件向子组件传递信息是通过属性来实现,子组件部分:

like.wxml:

<!--pages/like/like.wxml-->
<view class="like" bind:tap="click">收藏 -- {
   
   { like }}</view>

like.js,在.js里面去接收父组件传来的信息，like是一个属性，

properties: {
     like: {
       type:String,
       value:'默认值',
     }
  },

父组件部分:先在.json文件里注册子组件:

{
  "usingComponents": {
    "tmp-like": "/pages/like/like"
  }
}

.wxml，“tmp-like”是子组件的别名，

<tmp-like like ="message" ></tmp-like>

"message"会传递到子组件，运行之后界面会出现:

收藏 -- message

子组件传递信息到父组件,主要是通过triggerEvent 来触发

给子组件绑定点击事件:

<view class="like" bind:tap="click">收藏 -- {
   
   { like }}</view>

子组件.js里面:

  methods: {
    click() {
      this.triggerEvent('clicklike'
      ,{like:"childMessage",num:1},null)
    }

  }
})

父组件里面.wxml

<tmp-like  bind:clicklike="play"></tmp-like>

父组件.js里面：

  play(event) {
     console.log(event);
  }

注:“clicklike”是一个点击事件的别名，父组件里面需要和子组件保持一致，play是在父组件里重写的映射点击事件；当点击子组件文本时，会输出:

detail: {like: "childMessage", num: 1}