微信小程序 父子组件

本文主要是介绍微信小程序 父子组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

组件引用

全局引用

在app.json中引用则该组件为全局组件，供每个页面调用该组件

页面或组件引用

在对应页面或者组件的json文件种添加

页面布局

index/index.wxml

<view>index</view>
<parent></parent>

parent/index.wxml

<view>parent</view>
<child></child>

child/index.wxml

<view>child</view>

组件通讯

父组件向子组件传值

child/index.js

子组件定义属性

Component({
  properties: {
    like: {
      type: String,
      value: "默认值"
    }
  }, 
}) 

child/index.wxml

子组件展示该属性

<view>properties.like:{{like}}</view>

效果

parent/index.wxml

父组件传值

<child like="打游戏"></child>

效果

父组件调用子组件方法

child/index.js

给子组件添加方法

Component({
  properties: {
    like: {
      type: String,
      value: "默认值"
    }
  },
  methods: {
    doLikeThings() {
      console.log(`去${this.properties.like}`);
    }
  }
})

parent/index.wxml

添加一个id为music的组件

<child like="听音乐" id="music"></child>  

parent/index.js

注: 当parent为页面时，应为 wx.selectComponent

当组件生命周期执行到了ready时调用选择id为music的组件，调用组件的doLikeThings方法

Component({
  lifetimes: {
    ready() {
      this.selectComponent("#music").doLikeThings();
    }
  },
})

效果

子组件回调父组件方法

child/index.js

在子组件加载成功后向父组件发送事件

lifetimes:{
    ready(){
        this.triggerEvent("loaded", this.properties)
    }
}

parent/index.js

在父组件写一个方法接受该事件

methods: {
    childLoadedCallBack(e) {
        console.log(e);
    }
}

parent/index.wxml

进行关联绑定

<child like="写代码" bind:loaded="childLoadedCallBack"></child>

效果

这篇关于微信小程序 父子组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！