Vue 通信

父子通信

父组件使用 prop 传递数据给子组件

在父组件 father.vue 中引用子组件 child.vue，把 name 的值传给 child 组件。

<template>
  <div class="app">
    // message 定义在子组件的 props 中
    <child :message="name"></child>
  </div>
</template>

<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data() {
    return {
      name: 'linxin'
    }
  }
}
</script>

在子组件 child.vue 中的 props 选项中声明它期待获得的数据

<template>
  <span>Hello {{message}}</span>
</template>

<script>
export default {
  // 在 props 中声明获取父组件的数据通过 message 传过来
  props: ['message']
}
</script>

子组件通过自定义事件跟父组件通信

父组件 father.vue 在子组件上监听子组件触发的事件

<template>
  <div id="app">
    <p>{{ total }}</p>
    <child @increment="incrementTotal"></child>
  </div>
</template>

<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data() {
    return {
      total: 0
    }
  },
  methods: {
    incrementTotal: function() {
      this.total += 1
    }
  }
}
</script>

子组件 child.vue 派发一个事件名称与父组件通信

<template>
  <button @click="incrementCounter">{{ counter }}</button>
</template>

<script>
export default {
  data: function() {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function() {
      this.counter += 1
      this.$emit('increment')
    }
  }
}
</script>

兄弟通信

全局事件中心 bus.js 文件

import Vue from 'vue'
export default new Vue();

父组件 father.vue

<template>
  <div id="app">
    <childa></childa>
    <childb></childb>
  </div>
</template>

<script>
import childa from './components/childa';
import childb from './components/childb';

export default {
  components: {
    childa,
    childb,
  },
}
</script>

子组件 childA.vue

<template>
  <p>{{ msg }}</p>
</template>

<script>
import bus from '../bus'
export default {
  data: function() {
    return {
      msg: "你好"
    }
  },
  created: function() {
    bus.$on('setMsg', it => {
      this.msg = it
    })
  }
}
</script>

子组件 childB.vue

<template>
  <button @click='sendEvent'>Say Hi</button>
</template>

<script>
import bus from '../bus'
export default {
  methods: {
    sendEvent: function() {
      bus.$emit('setMsg', 'hi vue')
    }
  }
}
</script>

vuex

在组件中获得 Vuex 状态

mapState函数

// Vue
import { mapState } from 'vuex'

export default {
  computed: mapState(['count'])
}

从 store 中的 state 中派生出一些状态

Getters对象

// Vuex
getters: {
  doneTodos: state => { // 对state对象进行做处理计算
    return state.todos.filter(todo => todo.done)
  }
}

mapGetters辅助函数

// Vue
import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }
}

更改 store 中的状态的唯一方法是提交 mutation

//  Vuex
mutation: {
  increment (state, payload) {
    state.totalPrice += payload.price + payload.count;
  }
}

对象风格的提交方式

// Vue
store.commit({
  type: 'increment',
  price: 10,
  count: 8
})

使用常量替代 Mutation 事件类型

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import * as types from  './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state,payload) {
      // mutate state
      state.payload = payload
    }
  }
})

mapMutations函数 - 在组件中提交 Mutations

// Vue
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

Action

Action 是异步提交 mutation

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

分发 Action

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

mapActions - 在组件中分发 Action

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}