微信小程序页面之间通讯以及组件之间通信
1.页面与页面传值-跳转的url带参传值
微信小程序页面直接传值我们经常用到的是页面URL跳转传值，跳转到的页面通过到生命周期onLoad里面接收。
//A页面
Page({
data:{
},
linkTo:function(){//页面事件绑定方法
let data = 'hello world';
wx.navigateTo({
url: '/pages/my/index?name=' + data,
})
}
}）
//B页面
Page({
data:{
name:' '
},
onLoad:function(option){//接收数据
this.setData({
name: option.name
})
}
}）
如果页面有多个值要传，直接用&符合链接起来就可以了。
比如'/pages/my/index?name=' + data1+'&number='+data2;
2.页面与页面传值-全局globalData传值
//app.js
App({
onLaunch (options) {
},
globalData: {
name:'sslcsq'
}
})
//A页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//sslcsq
}
}）
全局数据的拿去是通过拿去globalData对象，再到其他页面获取，当然也可以修改全局对象里面数据其他页面从新去获取。
//A页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
app.globalData.name='愁死俺了'; //修改全局数据
}
}）
//B页面
const app = getApp();//获取全局对象
Page({
data:{
},
onLoad:function(){
let name = app.globalData.name;
console.log(name);//愁死俺了
}
}）
3.页面与页面传值-页面数据缓存wx.setStorageSync('name',值)
//A页面
Page({
data:{
},
onLoad:function(){
wx.setStorage({
key:"name",
data:"sslcsq"
})
}
}）
//B页面
Page({
data:{
},
onLoad:function(){
var value = wx.getStorageSync('name')；
console.log(value);// sslcsq
}
}）
此处缓存数据要用同步wx.setStorageSync(),因为异步有可能数据或者有可能会获取不到
上面是小程序的页面之间的通讯，
下面来说小程序组件之间通讯
一、父传子:
与vue中的父传子类似，在父组件的子组件标签上添加自定义属性，在子组件中通过properties来接收传递的数据
Component({
properties: {
title:{
value:'标题', //如果传递了接收传递得到数据 没有接收默认值
type:String //验证数据类型 [string,number,object......]
},
},
})
二、子传父
小程序子传父实现也与vue相似：
主要通过 this.triggerEvent('事件名',要传递的数据对象,事件选项)
事件选项：
bubbles Boolean 否 false 事件是否冒泡
composed Boolean 否 false 事件是否可以穿越组件边界
capturePhase Boolean 否 false 事件是否拥有捕获阶段
子组件：this.triggerEvent('confirm',{ name this.data.name,hello:'sslcsq'})
父组件的子组件标签：<子组件 bindconfirm="getConfirmFn" /> // getcont 随便起名
Page({
getcont (e) {
let name=e.detail.name
this.setData({
name:name // 可简写成一个name
})
}
})
Slot:插槽
可以通过slot实现内容分发，最终实现组件结构的按需定制
1、单slot: 不用配置
在组件内部添加插入的数据
2、多slot：
第一步：使用多slot,必须在组件的JS中开启多slot
Component({
options:{
multipleSlots: true
}
})
第二步： 在子组件内部添加
第三步： 然后再引用的组件中插入模板结构，例如：
<父组件>
添加的数据
组件样式是否可穿透：
小程序实现样式穿透有三种：
第一种：给封装的组件添加 styleIsolation: 'apply-shared' 选项实现
第二种：通过 addGlobalClass: true实现
第三种：【推荐】通过在Component中添加指定外部类来实现,例如：
externalClasses: ['my-bg'],
第一种和第二种都需要在options添加
、、、、、
组件间通信
组件间的基本通信方式有以下几种。
WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
组件和其他的js、json文件和页面不一样。
Component构造器
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
使用 Component 构造器构造页面
{
"component": true,//这里是它把定义成组件，要不然引入到页面会报错
}
引入组件
//A页面 json
{
"usingComponents": {
"myComponents": "../../components/myComponents/index",//引入组件
},
}
//A页面 WXML
组件间通信与事件
监听事件
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。监听自定义组件事件的方法与监听基础组件事件的方法完全一致：
Page({
onMyEvent: function(e){
e.detail // 自定义组件触发事件时提供的detail对象
}
})
触发事件
自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项
Component({
properties: {},
methods: {
onTap: function(){
var myEventDetail = {} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
})