zoukankan      html  css  js  c++  java
  • 小程序父子组件通信

    父组件向子组件传递数据

    • 在父组件的文件夹中的.json文件下引入子组件
    {
      "usingComponents": {
      	//"Tab" 是自己定义的组件名称
      	//"../../components/Tab/Tab" 是组件的路径
        "Tab":"../../components/Tab/Tab"
      }
    }
    
    • 在父组件里以标签的形式写入子组件
      • 如果需要传值的话,在标签上自定义属性名,属性值要以双花括号保住
    <Tab tabs="{{tabs}}" data-index={{index}}></Tab>
    
    • 子组件是通过properties来获取父组件传递的数据,接着子组件把这个数据当成是data中的数据使用即可
    Component({
      ///组件的属性列表
      properties: {
        tabs:{
          type:Array, //要接收的数据类型
          value:[] //默认值(可选)
        }
      }
    })
    

    子组件向父组件传递数据

    • 通过this.triggerEvent()用于子组件向父组件发射事件和参数
    <button size="mini" bind:tap="handleTap">+1</button>
    
    methods: {
        handleTap(){
          //三个参数:方法名称,子组件要往父组件传递的参数
          this.triggerEvent("increment",{index:0})
        }
      }
    
    • 父组件页面中使用bind监听子组件发射过来的事件:
    <Tab tabs="{{tabs}}" bindincrement="handleIncrement"></Tab>
    
    • 父组件方法使用:
    handleIncrement(e){
    	//子组件向父组件传递过来的参数都储存在事件对象e中
        const index = e.detail.index
        this.setData({
          count:this.data.count + index
        })
    }
    
  • 相关阅读:
    【软件工程】个人项目作业
    【软件工程】个人博客作业
    【软件工程】第一次作业-热身!
    OO第四单元总结
    OO第三单元总结
    OO第二单元总结
    OO第一单元总结
    提问回顾与个人总结
    [技术博客] Django中文件的保存与访问
    OO第三单元博客作业
  • 原文地址:https://www.cnblogs.com/jincanyu/p/14349236.html
Copyright © 2011-2022 走看看