双向绑定实现($on $emit)

关于父子之间数据更新同步, 如果单向绑定, 子修改了,父却没有修改, 这种一般不符合规范正常更新数据的套路是:
1. 子通知父更新数据
2. 子自动刷新获取最新数据

- 为实现这个,就会有发布订阅模式
1.特点: 一对多, 一个动作产生,引发一连串行为. 对应到数据结构是:{失恋:[cry,eat,shopping]} 
2.如果失恋产生, 则会触发cry,eat shopping一系列动作执行. 这个思路就是发布订阅模式. 对应到vue,就是子去通知父亲刷新数据后子同步数据.// 发布 emit 订阅 on {}
function Girl() {this._events = {}
}
Girl.prototype.on = function (eventName,callback) {if(this._events[eventName]){ // 不是第一次this._events[eventName].push(callback); // {失恋:[cry,eat,shopping]}}else{this._events[eventName] = [callback] //{失恋:[cry]}}
};
Girl.prototype.emit = function (eventName,...args) { //[我，你，他]// [].slice.call(arguments,1);// Array.from(arguments).slice(1);if(this._events[eventName]){this._events[eventName].forEach(cb=>cb(...args));}
};
let girl = new Girl();
let girl1 = new Girl();
let cry = (who) =>{console.log(who+'哭');};
let shopping = (who) =>{console.log(who+'购物');};
let eat = (who) =>{console.log(who+'吃');};
girl.on('失恋',cry); // {失恋:[cry]}
girl.on('失恋',eat); // {失恋:[cry,eat]}
girl.on('失恋',shopping); // {失恋:[cry,eat,shopping]}
girl1.emit('失恋');

本文思路:- 先实现子获取父数据(单向绑定)
- 然后实现双向数据更新($on $emit)1.给父亲写改money的方法(但不要注册到父上) 2.将父改money方法传给子,$on3.子一旦想改数据,即会发射信息$emit给父,提示父该执行动作了.- 双向更新简化: sync1.直接实现2.语法糖简化

money:{{money}} 

- 双向绑定3步走
// 1. 父亲定义更改自己money事件methods: {getMoney() {this.$emit('childthings', 1400);} 
// 2. 父将事件传给子, childthings.$on('childthings',things)
// 3, 子在这里(相当于)触发父方法在父上执行awsome.$emit('childthings', 1400);

money:{{money}} 

- 双向绑定的简写: syncmoney:{{money}} 
sync双向绑定1-1:
sync双向绑定1-2:
sync双向绑定1-3: 简化写法

- 最简单的写法{{money}}

模态框案例

参考

• 1.父传数据给子, 父将flag=true传给子,实现点按钮弹出
• 2.子远程替父调用方法,修改flag=false,实现点关闭按钮关闭.

模态框

较为抽象的代码

弹

mounted里refs实现父类触发子类的方法.

加载中...页在加载完成后会被销毁, 谁来触发他销毁? 一般是父类. 映射到vue就是父类触发子类的方法.

1.给要获取子组件添加ref标识
2.mounted阶段调用,如this.$refs.load.hide()注: ref放在组件上获取的是vue实例(VueComponent), 而非dom元素, 但可以通过实例在全局调用子元素的方法.

- 学习知识一贯的做法是,先理解骨干使用套路, 然后结合栗子来揣摩知识点的设计理念(用来解决啥问题)下面是ref一个栗子页面loading.

转载于:https://www.cnblogs.com/iiiiiher/p/9030959.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！