美文网首页
组件和页面通信

组件和页面通信

作者: 晓函 | 来源:发表于2020-12-03 12:02 被阅读0次

父传子很简单:

【组件】

#mycomponent.js
Component({
  properties: {
    title:String
  },
  lifetimes:{
    attached:function(){
      console.log(this.data.title);
    }
  }

})

【页面】

#index.wxml
  <my-component title="我很好">
  </my-component>

子传父:
要使用triggerEvent,类似win32里面的sendMessage消息
【组件】

#mycomponent.wxml
<button bindtap="OnTap">保存地址</button>

#mycomponent.js
Component({
  methods:{
    onTap(e){
      //发送地址改变的通知
      this.triggerEvent("addrChange","中国深圳");
    }
  }

})

【页面】

#index.wxml
<view>{{address}}</view>
<my-component bind:addrChange="showAddress"></my-component>


#index.js
showAddress(e){
  setData({address:e.detail});
}

相关文章

  • 组件和页面通信

    父传子很简单: 【组件】 【页面】 子传父:要使用triggerEvent,类似win32里面的sendMessa...

  • 2018-05-23 (表严肃)笔记二

    二、组件 全局及局部组件 配置组件点赞的实现: 组件通信之父子通信(1) 父子通信 props: 在当前页面中点击...

  • 小程序的数据通信

    一、页面与组件通信 1.页面传递内容给组件 page为页面的属性名 components 为组件的外部属性名, 用...

  • 前端常见面试题四

    目录: 1、详述组件通信 2、keep-alive组件的作用 3、单页面应用和多页面应用区别及优缺点 4、什么是计...

  • 客户端与MQTT服务端通信 --- vue.js

    1.在index.html中引入mqttws31.js 2.封装mqtt通信组件 在需要通信的页面引入mqtt组件...

  • Vue组件通信大全(终结篇)

    背景   Vue是单页面应用,单页面应用又是由组件构成,各个组件之间又互相关联,那么如何实现组件之间通信就显得尤为...

  • Vue入门系列(五)组件通信

    组件内通信主要分为两种:父子组件通信和子组件之间通信。 1.父子组件通信 父组件通过props属性向子组件传递数据...

  • Vue父子组件通信

    Vue父子组件通信 Web中的组件其实就是页面组成的一部分。 那组件之间的通信该怎么办?这是个重点(必须掌握),同...

  • Vue 组件详解之组件通信

    组件中的关系可分为父子组件通信、兄弟组件通信和跨级组件通信。 一、自定义事件 ---- 子组件给父组件传递数据 我...

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

网友评论

      本文标题:组件和页面通信

      本文链接:https://www.haomeiwen.com/subject/mzlmwktx.html