VueJs 2.0中兄弟组件之间的通信

作者: 甲基蓝
发布时间: 2024-12-12 05:50:16 (1月前)
转自：

3 条回复

0#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 如果我想“破解”Vue中的正常通信模式，我通常会这样做，特别是现在 <code> .sync </code> 不推荐使用，是创建一个处理组件之间通信的简单EventEmitter。来自我最近的一个项目： <pre> <code> import {EventEmitter} from 'events' var Transmitter = Object.assign({}, EventEmitter.prototype, { /* ... */ }) </code> </pre> 有了这个 <code> Transmitter </code> 您可以在任何组件中执行的对象： <pre> <code> import Transmitter from './Transmitter' var ComponentOne = Vue.extend({ methods: { transmit: Transmitter.emit('update') } }) </code> </pre> 并创建一个“接收”组件： <pre> <code> import Transmitter from './Transmitter' var ComponentTwo = Vue.extend({ ready: function () { Transmitter.on('update', this.doThingOnUpdate) } }) </code> </pre> 同样，这是真正特定的用途。不要将整个应用程序基于此模式，使用类似的东西 <code> Vuex </code> 代替。 </DIV>

编辑
1#
回复此人
木木 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 好的，我们可以通过父母使用兄弟姐妹之间的沟通 <code> v-on </code> 事件。 <pre> <code> Parent |-List of items //sibling 1 - "List" |-Details of selected item //sibling 2 - "Details" </code> </pre> 我们假设我们想要更新 <code> Details </code> 单击某个元素时的组件 <code> List </code> 。 <HR /> 在 <code> Parent </code> ： 模板： <pre> <code> <list v-model="listModel" v-on:select-item="setSelectedItem" ></list> <details v-model="selectedModel"></details> </code> </pre> 这里： <UL> <LI> <code> v-on:select-item </code> 这是一个将被召唤的事件 <code> List </code> 组件（见下文）; </LI> <LI> <code> setSelectedItem </code> 它是 <code> Parent </code> 的更新方法 <code> selectedModel </code> ; </LI> </UL> JS： <pre> <code> //... data () { return { listModel: ['a', 'b'] selectedModel: null } }, methods: { setSelectedItem (item) { this.selectedModel = item //here we change the Detail's model }, } //... </code> </pre> <HR /> 在 <code> List </code> ： 模板： <pre> <code> <ul> <li v-for="i in list" :value="i" @click="select(i, $event)"> </li> </ul> </code> </pre> JS： <pre> <code> //... data () { return { selected: null } }, props: { list: { type: Array, required: true } }, methods: { select (item) { this.selected = item this.$emit('select-item', item) // here we call the event we waiting for in "Parent" }, } //... </code> </pre> 这里： <UL> <LI> <code> this.$emit('select-item', item) </code> 将通过发送项目 <code> select-item </code> 直接在父母。父母将把它发送到 <code> Details </code> 视图 </LI> </UL> </DIV>

编辑

登录后才能参与评论