Vue组件间通信

父子组间通信

通过props向子组件传值，通过事件向父级组件发送消息

通过props向子组件传值

• 由于大小写不敏感，所以驼峰会转换为短横命名

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

• 传递静态或动态 Prop

// 传递静态值
<blog-post title="My journey with Vue"></blog-post>
// 传递动态值，使用v-bind语法，使用规则和普通文件使用方式一样。
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

• props是单向数据流，父组件更新会引发子组件更新
  当试图改变props时，通常的做法是props本地化，进入子组件data或者计算属性中

• Tip
  注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

通过事件向父级组件发送消息

1. 子组件注册事件

// 传输额外参数
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

2. 父组件接受事件

<blog-post v-on:enlarge-text="onEnlargeText"
></blog-post>
methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

3. 在组件上使用 v-model
   <custom-input v-model="searchText"></custom-input>
   等价

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

兄弟组件通信

简单的store模式

可以直接多个vue实例中共享一个数据，当引用数据发生变化的时候多个实例视图会发生变化。这是最简单的的通信方式。但是基本没有调试。
进化模式：store，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}
// 使用
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

eventBus

1. 定义一个EventBus.js文件

import Vue from 'vue';
export const EventBus = new Vue();

2. A组件中触发事件

import { EventBus } from './event-bus.js';
EventBus.$emit('i-got-clicked', this.clickCount);

3. B组件中监听事件

import { EventBus } from './event-bus.js';
// 监听事件以及payload
EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Vuex

详见Vuex使用