首页
   /       /   
小程序组件-父子组件之间的通信
5月
26
小程序组件-父子组件之间的通信
作者:大彭Sir    分类: 教学教程

属性绑定

  • 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据

父组件的data

  data: {
    count: 99
  },

父组件的结构

<test4 ccount="{{count}}"></test4>
<view> 数据:{{count}}</view>

子组件

  /**
   * 组件的属性列表
   */
  properties: {
    ccount:Number
  },

子组件的结构

<view>这是组件4</view>
<view>父组件传递过来的数据:{{ccount}}</view>

事件绑定

  • 用于子组件向父组件传递数据,可以传递任意数据
  1. 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

    syncount(e){
    console.log(e.detail.value);
    this.setData({
      count1:e.detail.value
    })
    },
  2. 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件

    {{count1}}
    <test5 bind:sync="syncount"></test5>
  3. 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件

    addcount(){
      this.setData({
        count:this.data.count+1
      })
      // 调用父组件的sync函数
      this.triggerEvent('sync',{value:this.data.count})
    }
  4. 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据

    syncount(e){
    console.log(e.detail.value);
    this.setData({
      count1:e.detail.value
    })
    },

获取组件实例

可在父组件里调用this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(".my-component")

子组件

<view>子组件</view>
<view>
姓名:{{username}}===密码:{{password}}===年龄:{{age}}
</view>
   /**
     * 组件的初始数据
     */
    data: {
        username:"tomcat",
        password:"123",
        age:18
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 修改子组件年龄
        addAge(){
            this.setData({
                age:100
            })
        }
    }

父组件

<test3 id="abc"></test3>
<view>````````````````````````````````````````````````````````````````````</view>
<button bindtap="getComp" type="warn" size="mini">获取子组件的实例对象</button>
//获取子组件的实例对象
getComp(){
  //参数是一个选择器
  const child = this.selectComponent('#abc')
  console.log(child)
  console.log("用户名:"+child.data.username)
  child.addAge();
},
本文标签:标签: 小程序 组件
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录