一、父子组件
父Home.vue，子Mine.vue
Home使用Mine，首先Home的script里引入Mine，然后export中components中声明，然后在template中使用。
<template>
<mine-vue />
</template>
<script>
import MineVue from '@/views/Mine.vue'
export default {
components: {
MineVue
}
}
</script>
这里注意使用时需要短横线分隔命名，Html对大小写不敏感，为了统一可以将引入和声明都改为mine-vue。
1、父组件给子组件传值及调用函数：
首先Mine的script里，export中，props加入属性msg，methods里加入函数sel。
<script>
export default {
props: {
msg: String
},
methods: {
sel(arg) {
}
}
}
</script>
然后回到Home中，使用Mine的地方更改为<mine-vue ref="mine" msg="send a message to mine" />
这样，Home通过msg给Mine传了个字符串send a message to mine。
如果想要传动态的值，再次修改<mine-vue ref="mine" :msg="message" />
然后在Home的export default中加入
data() {
return {
message: 'send a message to mine'
}
}
这样，就可以实时更新属性msg，注意这里的message是个属性，不是字符串。:msg前省略了v-bind。
最后Home调用Mine函数：this.$refs.mine.sel(arg)。
2、子组件给父组件传值及调用函数：
传值可以通过函数的方式来实现，这样，只要子组件可以调用父组件函数就可以。
首先在Home的export default的methods中加入一个带参函数
methods: {
homeSel(arg) {
}
}
然后使用Mine的地方更改为<mine-vue ref="mine" :msg="message" @callHomeSel="homeSel" />
最后回到Mine里，在需要的地方调用this.$emit('callHomeSel', arg)，这里使用callHomeSel只是为了区分，实际开发中最好和函数名统一，这样就实现了子组件调用父组件函数，并传值。
整体代码如下：
Home.vue
</template>
<div>
<mine-vue ref="mine" :msg="message" @homeSel="homeSel" />
<button @click="buttonClicked">Tap</button>
</div>
</template>
<script>
import mine-vue '@/views/Mine.vue'
export default {
name: 'Home',
components: {
mine-vue
},
data() {
return {
message: 'send a message to mine'
}
},
methods: {
homeSel(arg) {
},
buttonClicked() {
this.$refs.mine.sel('lee')
}
}
}
</script>
Mine.vue
<template>
<div>
<div>{{msg}}</div>
<button @click="buttonClicked">Tap</button>
<div>
</template>
<script>
export default {
props: {
msg: String
},
methods: {
sel(arg) {
},
buttonClicked() {
this.$emit('homeSel', 'lee')
}
}
}
</script>
二、非父子组件通信
eventBus
首先main.js注册一个全局的bus，Vue.prototype.$bus = new Vue()
然后创建三个组件Add，Reduce，Home，其中Add和Reduce里各放一个按钮。
Add.vue
<template>
<div>
<button @click="buttonAction">add:{{num}}</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
methods: {
buttonAction() {
this.$bus.$emit('event-reduce', this.num)
}
},
mounted() {
this.$bus.$on('event-add', (arg) => {
this.num += arg
})
}
}
</script>
Reduce.vue
<template>
<div>
<button @click="buttonAction">reduce:{{num}}</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 10
}
},
methods: {
buttonAction() {
this.$bus.$emit('event-add', this.num)
}
},
mounted() {
this.$bus.$on('event-reduce', (arg) => {
this.num -= arg
})
}
}
</script>
Home.vue
<template>
<div>
<h1>This is Home page</h1>
<add-vue />
<br />
<reduce-vue />
</div>
</template>
<script>
import add-vue from '@/views/Add.vue'
import reduce-vue from './Reduce.vue'
export default {
components: {
add-vue,
reduce-due
}
}
</script>
分析一下，Add注册了监听事件event-add，Reduce注册了监听事件event-reduce
点Add里的按钮会通过$emit发消息，Reduce通过$on接收消息。
最后说下Vuex吧
package.json加入依赖vuex，创建store文件夹，该目录下创建index.js，然后main.js引入并使用
main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
store下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: {name: '', age: 0}
},
mutations: {
updateUserInfo(state, data) {
state.userInfo = data
}
},
actions: {
changeUserInfo(context, data) {
context.commit('updateUserInfo', data)
}
},
getters: {
userInfo(state) {
return state.userInfo
},
modules: {},
})
actions:和mutations:里的函数名一般是统一的，为了方便学习而区分。
这样userInfo就可以在各组件使用了，调用actions的函数改变userInfo
this.$store.dispatch('changeUserInfo', {name: 'lee', age: 30})
获取userInfo使用：this.$store.getters.userInfo
