Vue组件通信

父子组件通信

父组件和子组件通信

使用

ref

为子组件指定一个索引

ID

<div id="counter-event-example">
<p @click="clickB">{{ msg }}</p>
<button-counter-a ></button-counter-a>
<button-counter-b ref="refB"></button-counter-b>
</div>

然后便可以在父组件中通过

this.$refs.refB

访问子组件方法了

Vue.component('button-counter-a', {
template: '<button v-on:click="eventClick">{{ msg }}</button>',
data: function () {
return {
msg: '组件A'
}
},
methods: {
eventClick: function () {
}
}
})

Vue.component('button-counter-b', {
template: '<button>{{ msg }}</button>',
data: function () {
return {
msg: '组件B'
}
},
methods: {
eventClick: function (msg) {
console.log(msg)
}
}
})

new Vue({
el: '#counter-event-example',
data: {
msg: '父组件'
},
methods: {
clickB () {
this.$refs.refB.eventClick(this.msg);
}
}
})

点击父组件便可以在控制台上看到子组件的输出了

可以在 这里 看看效果。

子组件和父组件通信

首先在父组件使用

$on(eventName)

监听， 然后在子组件

$emit(eventName)

触发事件。

如 官网 中的计数器实例，先是在父组件上监听事件

incrementTotal

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter :count="count" v-on:increment="incrementTotal"></button-counter>
<button-counter :count="count" v-on:increment="incrementTotal"></button-counter>
</div>

然后在子组件中触发父组件事件，动态更改计数

Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
props : ["count"],
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment', this.counter) // 第二个参数，可以传递到父组件中
console.log(this.count) // 调用父组件方法，然后发现count值变了，这里相当于接收返回值了
}
}
})

new Vue({
el: '#counter-event-example',
data: {
total: 0,
count: 0
},
methods: {
incrementTotal: function (count) {
console.log(count) // 接收子组件中的参数
this.count += 1
this.total += 1
}
}
})

这里父子组件通信，父组件通过

props

向子组件传值，子组件通过自定义是事件与父组件通信

可以在 这里 看看效果。

兄弟组件通信

若

A

组件想要和

B

组件通信，按照父子组件通信的思维，则是

A

和父组件通信，然后父组件再和

B

组件通信，比较绕。有没有更好的方法呢，事实上，

Vue

提供了个

Event Bus

（中央事件总线）的机制。

bus.js

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

在A组件中触发组件 B 中的事件

import bus from 'bus.js';
bus.$emit('eventB', 'A')

在组件 B 创建的钩子中监听事件

import bus from 'bus.js';
bus.$on('eventB', function (msg) {
console.log(msg)
})

可以在 这里 看看效果。

Vuex

对于复杂的组件通信， 还是推崇

Vue

专门用来状态管理模式的

Vuex

。来看看下面官网上的这张图



图中的

State

， 就是驱动应用的原始数据源，以声明方式将这些

State

映射到

View

中，而要改变

State

，则要通过一些

Action

来驱动。



图中绿色虚线

Vuex

部分显示发生在

Component

上的一次事件中来

Commit

一个相应的

Mutations

方法，

Mutations

方法来

Mutate

对应的

State

，然后在组件中通过计算属性的监测，响应式更新视图。

来看个简单的计数器 实例

<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++, // 箭头函数，相当于 function (state) {return state.count++}
decrement: state => state.count--
}
})

new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})

最后来个在实际项目中

Vuex

实例，需要安装

npm install vuex vuex-persistedstate

,

vuex-persistedstate

实际上使用了

HTML 5

中的

localStorage

来做缓存，这样在刷新页面后之前

state

的数据不会丢失。

mutation-type.js

// 更新 count
export const UPDATE_COUNT = 'UPDATE_COUNT';

mutation.js

import * as types from './mutation-types'

export default {
// 更新 count
[types.UPDATE_COUNT] (state, count) {
state.count= count
}
}

actions.js 【需注意在

mutations

里都是用大写下划线连接，在

actions

里都用小写驼峰对应】

import * as types from './mutation-types'

export default {
updateCount({ commit }, count) {
commit(types.UPDATE_COUNT, count)
}
}

getters.js

export default {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

state 【index.js】

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex);

const state = {
count: 0
};

export default new Vuex.Store({
state,
mutations,
actions,
getters,
plugins: [createPersistedState()]
})

main.js

import store from './store'

new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})

在具体某个组件中应用

<template>
<div @click="increment">{{count}} {{isEvenOrOdd}}</div>
</template>

<script>
export default {
name: 'bar',
computed: {
count () {
return this.$store.state.count
},
isEvenOrOdd () {
return this.$store.getters.evenOrOdd
}
},
methods: {
increment () {
this.count += 1
this.$store.dispatch('updateCount', this.count)
}
}
}
</script>

如果项目较大，而且操作的状态又多，要是都放在一棵树上，那么

store

对象就先显得臃肿，这时可以可以把

store

按一定逻辑分割成

module

（模块）

app.js

const app = {
state: {
count: 0
},
mutations: {
UPDATE_COUNT: (state, count) => {
state.count += count
}
},
actions: {
updateCount({ commit }, count) {
commit('UPDATE_COUNT', count)
}
}
getters: {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}
}

export default app;

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
import app from './modules/app';
Vue.use(Vuex);

const store = new Vuex.Store({
modules: {
app
},
plugins: [createPersistedState()]
});

export default store

引用

this.$store.state.app.count // 加上模块名
this.$store.dispatch('updateCount', 1)