传递可观察的数据/参数的最佳实践是什么,以便在被子组件修改后可以访问新值?
道具的流动性是下降的一种方式,儿童切勿直接修改其道具。
对于复杂的应用程序,vuex是解决方案,但对于简单的情况,vuex是一个过大的选择。就像@Belmin所说的一样,由于有了反应系统,您甚至可以为此使用普通的JavaScript对象。
另一个解决方案是使用事件。Vue已经实现了EventEmitter接口,孩子可以使用this.$emit('eventName', data)
它与父对象进行通信。
父母会听这样的事件:(@update
是的简写v-on:update
)
<child :value="value" @update="onChildUpdate" />
并更新事件处理程序中的数据:
methods: {
onChildUpdate (newValue) {
this.value = newValue
}
}
这是Vue中自定义事件的简单示例:http : //codepen.io/CodinCat/pen/ZBELjm? editors=
1010
这只是父子通信,如果组件需要与其同级对话,那么您将需要全局事件总线,在Vue.js中,您可以仅使用一个空的Vue实例:
const bus = new Vue()
// In component A
bus.$on('somethingUpdated', data => { ... })
// In component B
bus.$emit('somethingUpdated', newData)