1、父子组件通信
1.1 父传子 ----------------------------------------------------------
父组件传值到子组件使用 props
父组件代码:
<template>
<div>
<child :msg="parentMsg"></child>
</div>
</template>
<script>
import child '@/components/child'
export default {
nane: "index",
components: { child },
data() {
return {
parentMsg: '父组件信息'
}
},
methods: {
}
}
</script>
子组件代码:
<template>
<div>
<div>{{ msg }}</div>
</div>
</template>
<script>
export default {
nane: "",
data() {
return {
}
},
props: {
msg: {
default: null,
type: String
}
}
}
</script>
1.2 子传父 -------------------------------------------------------------------
子组件传值到父组件使用 $emit,父组件通过绑定事件的方式接收子组件传来的值
父组件代码:
<template>
<div>
<child @childMsg="childMsgFn"></child>
</div>
</template>
<script>
import child '@/components/child'
export default {
nane: "index",
components: { child },
data() {
return {
}
},
methods: {
childMsgFn(val) { // 接收参数
console.log(val) // 这是子组件信息
}
}
}
</script>
子组件代码:
<template>
<div>
<div @click="toParent"></div>
</div>
</template>
<script>
export default {
nane: "",
data() {
return {
}
},
methods: {
toParent() { // 传递参数
this.$emit('childMsg', '这是子组件信息')
}
}
}
</script>
2、兄弟组件通信(非父子组件)
vue官方没有提供兄弟组件之间可直接通信的工具,我们可以使用Vuex统一管理组件之间的数据,但是单纯只用来组件之间的通信有点大材小用,所以我们可以使用“中间件”作为组件间的通信桥梁。
所谓“中间件”就是实例化一个全新的Vue对象,将其封装成公共函数,供组件使用操作
首先创建一个公共util.js
// util.js
import Vue from 'vue'
export default new Vue() // 导出Vue实例
子组件A:
<template>
<div>
<div @click="moduleA">按钮</div>
</div>
</template>
<script>
// 引入中间件
import util from './util.js'
export default {
nane: "",
data() {
return {
}
},
methods: {
moduleA() {
util.$emit('bus', '这是子组件A的值')
}
}
}
</script>
子组件B:
<template>
<div>
<div @click="moduleB">按钮</div>
<div>{{ msg }}</div>
</div>
</template>
<script>
// 引入中间件
import util from './util.js'
export default {
nane: "",
data() {
return {
msg: ''
}
},
mounted() {
var vm = this
// 用$on触发事件并接收参数
util.$on('bus', res=> {
console.log(res) // 这是子组件A的值
vm.msg = res
})
},
methods: {
moduleB() {
}
}
}
</script>
END.