wepy —— 组件之间通信
一、props
1、静态传值 —— 父组件向子组件传递常量数据
// 父组件 <coma fruitName="橘子"></coma> // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button>
// js props = { fruitName: String } onLoad(){ console.log(this.fruitName); // 橘子 }
效果：
分析数据改变的情况：
此时没什么可说的，子组件改变了父组件传过来的值，也只会在子组件中表现出来。
比如在子组件内设置一个定时器，1.5秒后改变父组件传过来的值 fruitName，
// 父组件 // html <coma :fruitName="myFruit"></coma> // js data = { myFruit:'梨子' } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> // js props = { fruitName: String } onLoad(){ console.log(this.fruitName); // 梨子 setTimeout(() => { this.fruitName = "香蕉"; this.$apply(); }, 1500) }
效果：
2、动态传值 —— 将父组件动态的数据传递给子组件
// 父组件 // html <coma :fruitName="myFruit"></coma> // js data = { myFruit: '梨子' } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> // js props = { fruitName: String } onLoad(){ console.log(this.fruitName); // 梨子 }
效果：
分析数据改变的情况：
此时绑定的数据也是互不影响的，比如父组件传了动态的值 myFruit 给子组件，但同时父组件中自己也使用了 myFruit ，并且父组件中设置一个定时器，1.5秒后改变 myFruit ，这种操作，会影响到子组件已经接收到的 fruitName
吗。答案是不会的。只会影响到父组件自己。同理。3秒后，子组件中的一个定时器改变父组件中传递过来的 fruitName
，此时也是只会影响到子组件本身，不会影响到父组件中原有的 myFruit 。
// 父组件 // html <view class="mb20">我是父组件中的值 —— {{myFruit}}</view> <coma :fruitName="myFruit"></coma> // js data = { myFruit:'梨子' } onShow(){ setTimeout(() => { this.myFruit = "西瓜"; this.$apply(); }, 1500) } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> //js props = { fruitName: String } onLoad(){ console.log(this.fruitName); // 梨子 setTimeout(() => { this.fruitName = "香蕉"; this.$apply(); }, 3000) }
效果：
3、动态传值 —— .sync(父组件中动态数据的更改将影响到子组件)
可以通过 .sync 修饰符来进行动态绑定，这种情况下，父组件中更改原始值将反应到子组件，但是子组件中改变数据不能影响到父组件。
还是上面的那个例子，只是在父组件中使用子组件时绑定动态数据时使用了修饰符 .sync。
// 父组件 // html <view class="mb20">我是父组件中的值 —— {{myFruit}}</view> <coma :fruitName.sync="myFruit"></coma> // js data = { myFruit:'梨子' } onShow(){ setTimeout(() => { this.myFruit = "西瓜"; this.$apply(); }, 1500) } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> // js props = { fruitName: { type: String, default: null } } onLoad(){ console.log(this.fruitName); // 梨子 setTimeout(() => { this.fruitName = "香蕉"; this.$apply(); }, 3000) }
效果：
4、动态传值 —— twoWay: true（子组件中把传递过来的数据改变将影响到父组件原始数据）
可以通过设置子组件props的 twoWay:true 来动态绑定，这种情况下，子组件中对 props 的更改将反应到父组件，但是父组件中改变数据不能影响到子组件。
还是 2 那个例子，只是在子组件的props里加了twoWay:true。
// 父组件 // html <view class="mb20">我是父组件中的值 —— {{myFruit}}</view> <coma :fruitName="myFruit"></coma> // js data = { myFruit:'梨子' } onShow(){ setTimeout(() => { this.myFruit = "西瓜"; this.$apply(); }, 1500) } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> // js props = { fruitName: { type: String, default: null, twoWay: true } } onLoad(){ console.log(this.fruitName); // 梨子 setTimeout(() => { this.fruitName = "香蕉"; this.$apply(); }, 3000) }
效果：
5、动态传值 —— 同时使用 .sync 和 twoWay:true进行父子组件中数据双向绑定
这种情况，父组件把动态值传递给子组件，在父组件中改变了原始数据，子组件也会变，子组件中将props改变，父组件也会受到影响。
// 父组件 // html <view class="mb20">我是父组件中的值 —— {{myFruit}}</view> <coma :fruitName.sync="myFruit"></coma> // js data = { myFruit:'梨子' } onShow(){ setTimeout(() => { this.myFruit = "西瓜"; this.$apply(); }, 1500) } // 子组件 // html <button type="primary" plain="true">{{fruitName}}</button> // js props = { fruitName: { type: String, default: null, twoWay: true } } onLoad(){ console.log(this.fruitName); // 梨子 setTimeout(() => { this.fruitName = "香蕉"; this.$apply(); }, 3000) }
效果：
二、$broadcast —— 父组件给子组件传递值
子组件中在events中定义好事件并接收值：
// html <button type="primary" plain="true">{{fruitA}}</button> <button type="warn" plain="true">{{fruitB}}</button> // js data = { fruitA: '', fruitB: '' } events = { 'some-event': (a, b) => { this.fruitA = a; this.fruitB = b; } }
父组件触发事件并传递值：
onShow(){ this.$broadcast('some-event', '栗子', '柠檬'); }
效果：
三、$emit —— 子组件传值给父组件
父组件中在events中定义好事件并接收值：
events = { 'some-event': (a, b) => { console.log(a); // 橘子 console.log(b); // 苹果 } }
子组件触发事件并传递值：
onLoad(){ this.$emit('some-event', '橘子', '苹果'); }
四、$invoke —— 一个页面或组件对另一个组件中的方法的直接调用
子组件中定义好事件，并接收参数。
methods = { sayHi(user){ console.log(`${user}好，我是组件A中的事件。`); // jack好，我是组件A中的事件。 } }
某个页面或者组件触发事件并传递值
onShow(){ this.$invoke('coma', 'sayHi', 'jack'); }
五、组件自定义事件处理函数 (子组件传递数据给父组件)
使用方法如下
// 父组件 // html <button type="warn" plain="true" wx:if="{{fruitA}}">{{fruitA}}</button> <coma @childFn.user="parentFn"></coma> // js data = { fruitA: "" } methods = { parentFn(fruit, evt){ console.log(`我是来自子组件的水果：${fruit}` ); // 我是来自子组件的水果：柠檬 this.fruitA = fruit; } } // 子组件 // html <button type="primary" plain="true" @tap="tap">苹果</button> // js onLoad(){ this.$emit('childFn', "柠檬"); }
效果：
注意：如果用了自定义事件，则 events 中对应的监听函数不会执行。
