父向子传值：v-bind 属性绑定

  1. Vue.component('blog-post', {
  2.   // 在 JavaScript 中是 camelCase 的
  3.   props: ['postTitle'],
  4.   template: '<h3>{{ postTitle }}</h3>'
  5. })
  7. <!-- 在 HTML 中是 kebab-case 的 -->
  8. <!--不需要使用:  或 v-bind -->
  9. <blog-post post-title="hello!"></blog-post>
  11. <!-- 动态赋予一个变量的值 -->
  12. <blog-post v-bind:title="post.title"></blog-post>
  14. <!-- 动态赋予一个复杂表达式的值 -->
  15. <blog-post
  16.   v-bind:title="post.title + ' by ' + post.author.name"
  17. ></blog-post>

vm.$emit( eventName, […args] )

子向父传值 v-on 事件绑定，触发当前实例上的事件。

兄弟组件之间共享数据：EventBus

  • $on 接收数据的那个组件
  • $emit 发送数据的那个组件