Vue中父子俩部件通讯

2021-04-08 21:58

9808 body   div id="a"  父: input v-model="msg"/   aaa :msg="msg" @notick="notickEvent" /aaa   /div   templateid="b"   div  子: input v-model="msgChild"/   /div   /template   /body   script  // 子部件&ponent('aaa', { template: '#b', props: ['msg'],// 使子部件接纳到父部件的msg特性 data: function() { return { msgChild: ''// 子部件msg的取代品(vue2中严禁子部件立即更改父部件情况,只有根据取代) } }, watch: { msg: function(newVal, oldVal) { this.msgChild=newVal; }, msgChild: function(newVal, oldVal) { this.$emit('notick', newVal);// 子部件msgChild更改时,开启notick恶性事件 } } })  // 父部件 newVue({ el: '#a', data: { msg: '' }, methods: {  notickEvent: function(val) {  this.msg=val;  } } })  /script

根据编码大家能看出,在子向父传送信息内容的情况下,大家根据$emit去开启notick恶性事件进而启用父部件中的notickEvent进而更改父部件中的值,而父向子发送邮件息的情况下能够立即能够启用子部件实体模型watch中的msg方式。

一点PHP,每日一点技术性共享。



扫描二维码分享到微信

在线咨询
联系电话

020-66889888