【Vue】组件间通信

一、父组件->子组件

1.属性绑定

(1)父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div id="app">
<hello-world :message="message"></hello-world>
</div>
</template>

<script>
data () {
return {
message: 'father message'
}
}
</script>

(2)子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div>{{fatherMsg}}</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: ['message'],
data () {
return {
fatherMsg: this.message
}
}
}
</script>

2.调用父链($parent,$root

(1)父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<div id="app">
<hello-world></hello-world>
</div>
</template>

<script>
data () {
return {
message: 'father message'
}
}
</script>

(2)子组件

1
2
3
4
5
6
7
8
9
10
<script>
export default {
name: 'HelloWorld',
data () {
return {
fatherMsg: this.$parent.message
}
}
}
</script>

二、子组件->父组件

1.事件绑定

(1)子组件

1
2
3
4
5
6
7
8
<script>
export default {
name: 'HelloWorld',
mounted () {
this.$emit('init', 'child message')
}
}
</script>

(2)父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<div id="app">
<hello-world @init="handleInit"></hello-world>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
'hello-world': HelloWorld
},
methods: {
handleInit (msg) {
console.log(msg)
}
}
}
</script>

2.子组件索引

(1)子组件

1
2
3
4
5
6
7
8
9
10
<script>
export default {
name: 'HelloWorld',
data () {
return {
message: 'child message'
}
}
}
</script>

(2)父组件

1
2
3
4
5
6
7
8
9
<template>
<div id="app">
<hello-world ref="child1"></hello-world>
</div>
</template>

mounted () {
console.log(this.$refs.child1.message)
}

三、非父子组件间

1.Bus中央通信

(1)设置Bus组件

1
2
3
4
<script>
import Vue from 'vue'
export default new Vue()
</script>

(2)组件1发送事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<button @click="handleClick">brother</button>
</template>

<script>
import Bus from './Bus'
export default {
name: 'brother',
methods: {
handleClick () {
Bus.$emit('change', 'brother1 message')
}
}
}
</script>

(3)组件2监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>message:{{message}}</div>
</template>

<script>
import Bus from './Bus'
export default {
name: 'HelloWorld',
data () {
return {
message: ''
}
},
created () {
var _this = this
Bus.$on('change', function (msg) {
_this.message = msg
})
}
}
</script>