父子组件通信 目前共有2种
1. 模板创建 template (用于展示)
components/tips/index.wxml
<template name="tabBar">
子组件 <view class="container">{{tabBar}}</view> </template>
pages/test/index.wxml
<import src="../../components/tips/index.wxml"/>
<view>
<view>父组件</view>
<view>
<template data="{{tabBar}}" is="tabBar"></template>
</view>
</view>
pages/test/index.js
Page({
data: {
tabBar: ‘暂时没有任务哦~‘
}
})
2. 创建组件 Component (用户交互/逻辑)
父组件
pages/Hello/index.wxml
<!-- 父组件 -->
<view class="parentsContent"> <view>备注:父组件中定义变量,子组件监听并计算返回值,类似vue的computed</view> <view class="parentsAll"> <view>下面是父组件数据</view> <input placeholder="请输入a" value="{{numberA}}" bindblur="bindChangeA"/> <input placeholder="请输入b" value="{{numberB}}" bindblur="bindChangeB"/> <view>a*b结果: {{priceAll}}</view> <testComponent bind:myevent="onMyevent" numberA="{{numberA}}" numberB="{{numberB}}"> <text>将父组件的一段文字放入子组件的slot中</text> </testComponent> </view> </view>
pages/Hello/index.wxss
/* 父组件 */ .parentsAll{ border: 1px solid blue; padding: 10px; margin-top: 10px; } .parentsContent{ padding: 10px; margin: 10px; }
pages/Hello/index.json
// 父组件
{
"component": true, // 开启自定义组件
"usingComponents": {
"testComponent": "/pages/test/index" // 自定义组件的引用
}
}
pages/Hello/indexjs
// 父组件
Page({ data: { numberA: 0, numberB: 1, priceAll: 0 }, onReady: function () { }, //定义的事件: onMyevent: function (e) { var get_text = e.detail.text; console.log(‘进入onMyevent‘, e) this.setData( { "ctext": get_text, "priceAll": e.detail.total }, ) }, bindChangeA: function (params) { this.setData({ numberA: params.detail.value }) }, bindChangeB: function (params) { this.setData({ numberB: params.detail.value }) } })
子组件
components/testAll/index.wxml <view class="test_all"> <view>下面子组件数据</view> <button bindtap="_onTap" type="primary" size="mini"> a*b点击事件 </button> <view class=‘hahaha‘> <slot /> </view> </view>
components/testAll/index.wxss
.test_all{
border: 1px solid red;
padding: 10px;
margin-top: 10px;
}
components/testAll/index.js Component({ behaviors: [], properties: { numberA: { type: Number, observer: function (news, olds, path) { this.setData({ numberAs: news }) } }, numberB: { type: Number, observer: function (news, olds, path) { this.setData({ numberBs: news }) } } }, data: { numberAs: 0, numberBs: 1, priceTotal: 0 }, // 私有数据,可用于模板渲染 observers: { ‘numberAs, numberBs‘: function (numberA, numberB) { this.setData({ priceTotal: (numberA * numberB).toFixed(2) }) } }, lifetimes: { // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function () { console.log("子组件中的数据:", this.data) }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, // 方法 methods: { onMyButtonTap: function () { this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _onTap: function () { console.log(‘this‘, this.data) var myEventDetail = { // detail对象,提供给事件监听函数 //监听函数可以通过e.detail查看传递的数据; hidden: false, text: this.data.ctext, total: this.data.priceTotal } var myEventOption = { } // 触发事件的选项 this.triggerEvent(‘myevent‘, myEventDetail, myEventOption); } } })