一点PHP博客介绍关于前端Vue框架中的通信问题，在布局中通信方式根据不同的情况场景使用不同的通信方式，今天介绍的关于父子之间通信。
结合下面代码，观察通过在两种组件中输入值之后产生的变化：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<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> // 子组件 Vue.component('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，每天一点技术分享。
