组件通讯
组件通讯主要分为三种:子传父 ,父传子,兄弟通讯
父传子
父组件是通过props属性给子组件通信
props可以传字符串,对象,数组
代码如下
<template>
<div class="hello">
<child :inputValue = 'value'></child>
</div>
</template>
<script>
import child from './child'
export default {
data () {
return {
value:'我是父组件的value'
}
},
components:{child}
}
</script>
子组件
<template>
<div>
<span>{{inputValue}}</span>
</div>
</template>
<script>
export default {
props:{
inputValue:String
}
}
子传父
vue子传父使用$emit传值
代码如下
子组件
<template>
<div>
<button @click="toParent">点击传到父级</button>
</div>
</template>
<script>
export default {
name: 'child',
methods: {
toParent () {
this.$emit('fromChild', 'child')
}
}
}
</script>
父组件
<template>
<div>
<p>子级传过来的值:{{childVal}}</p>
<child @fromChild="getChild"></child>
</div>
</template>
<script>
import child from "@/components/child";
export default {
name: 'parent',
data () {
return {
childVal: ''
}
},
components: {
child
},
methods: {
getChild (v) {
this.childVal = v;
}
}
}
</script>
兄弟组件通讯
vue兄弟组件之间的传参是需要,建立一个公共的eventBus,然后兄弟之间以这个为桥梁实现通信
用$bus.$on接收数据
$bus.$emit发送数据
$bus.$off取消监听数据
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>兄弟组件之间的传参</title>
</head>
<body>
<div id="app">
<tom-vue></tom-vue>
<jerry-vue></jerry-vue>
<button @click="handle">销毁事件</button>
</div>
</body>
<script>
var hub = new Vue()
// 兄弟组件A
var tomVue = {
data(){
return {
num:1
}
},
template:'<button @click ="handle">tom点击了{{num}}次</button>',
created(){
// 监听组件的数据
hub.$on('tom-event',(val) => {
this.num += val
})
},
methods:{
// 触发兄弟组件的事件和给兄弟组件的值
handle () {
hub.$emit('jerry-event', 3)
}
}
}
// 兄弟组件B
var jerryVue = {
data(){
return {
num:1
}
},
template:'<button @click ="handle">jerry点击了{{num}}次</button>',
created(){
// 监听组件的数据
hub.$on('jerry-event',(val) => {
this.num += val
})
},
methods:{
// 触发兄弟组件的事件和给兄弟组件的值
handle () {
hub.$emit('tom-event', 2)
}
}
}
var vue = new Vue({
el: '#app',
data() {
return {
}
},
components:{
tomVue,
jerryVue
},
methods:{
handle(){
hub.$off('tom-event')
hub.$off('jerry-event')
}
}
})
</script>
</html>