Vue中的8种组件通信方式
Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要。 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provide / inject ref $attrs / $listeners 兄弟组件通信: eventBus Vuex 跨级通信: eventBus Vuex provide / inject $attrs / $listeners 一、props / $emit (最常用的组建通信方式) 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。 1. 父组件向子组件传值(props) 传入一个静态的值 <blog-post title="My journey with Vue"></blog-post> 传入一个动态的值, 任何 类型的值都可以传给一个 prop。 <blog-post v-bind:title="post.title"></blog-post> <blog-post v-bind:likes="42"></blog-post> <blog-post v-bind:is-published="false"></blog-post> <blog-post v-bind:comment-ids="[234,