一：组件间数据传递和内容分发
-
插槽
slot: 作为占位元素接受，组件传过来的元素
slot里调用数据时只能调用使用时的，访问不到定义时的
命名插槽写法，通过template的slot属性去关联替换
（1）.例如：my.vue引入lian.vue
1.png
2.png
2.父组件传子组件
props: 父组件传过来的数据，只能引用不准修改(用来接受父组件传的参数)
（1）例如 my.vue父组件向子组件lian.vue
1.png
2.png
(2) Dispatch （一个js文件）
使用方法
1.在子组件用important Dispatch from 'dispatch.js' 引入
列入：let abc=[a,b,c] ; Dispatch.emit('send',abc);
2.在父组件也需要important Dispatch from 'dispatch.js' 引入
DIspatch.on(this,'send',res=>{
console.log(res) // [a,b,c]
})
//MVVM 事件管理器
class Dispatch {
constructor() {
this.store = {};
}
/**
* 获取事件在列表中的位置
* @param context
* @param callback
* @private
*/
_evIndex(event, context, callback) {
let index = -1;
for (let i = 0; i <= event.length; i++) {
if (event[i].context === contex && event[i].callback === callback) {
index = i;
break;
}
}
return index;
}
/**
* 绑定事件
* @param eventType string 事件类型
* @param context Object callback的this作用域
* @param callback
*/
on(context, eventType, callback) {
if (typeof eventType != 'string' || typeof callback != 'function') {
return;
}
let event = this.store[eventType];
let eventObj = {
context: context,
callback: callback
};
if (!event || !Array.isArray(event)) {
this.store[eventType] = [eventObj];
} else if (this._evIndex(event, context, callback) < 0) {
this.store[eventType].push(eventObj);
}
}
/**
* 解绑事件
* @param eventType string
* @param callback 回调
*/
off(context, eventType, callback) {
if (typeof eventType != 'string' || typeof callback != 'function') {
return;
}
let event = this.store[eventType];
let eventObj = {
context: context,
callback: callback
};
if (event && Array.isArray(event)) {
let index = this._evIndex(event, context, callback);
if (index >= 0) {
this.store[eventType].splice(index, 1);
}
}
}
/**
* 广播某个事件
* @param eventType 时间类型
* @param data 数据
*/
emit(eventType, data = {}) {
if (typeof eventType != 'string') {
return;
}
let event = this.store[eventType];
if (event && Array.isArray(event)) {
for (let i = 0; i < event.length; i++) {
event[i].callback.call(event[i].context, data, eventType);
}
}
}
}
let Dispatcher = new Dispatch();
export default Dispatcher;
