# 组件通信
# 父子通信
# props与emit
父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件,这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据。
<!--父组件中-->
<input :param1="val" @changeparam1="callback"/>
<!--子组件中-->
<script>
this.$emit('changeparam1', 1)
</script>
1
2
3
4
5
6
2
3
4
5
6
# v-model
v-model 默认会解析成名为 value 的 prop 和名为 input 的事件。这种语法糖的方式是典型的双向绑定，但是究其根本，还是通过事件的方法让父组件修改数据。
子组件
<div>
<input @input="handleInput" :value="value"/>
</div>
<script>
export default{
props: {
value: String
},
methods: {
handleInput(e) {
this.$emit('input', e.target.value)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
父组件
<h1>{{param1}}</h1>
<fw-input v-model="param1"></fw-input>
<script>
export default{
date(){
return {
param:'666'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# $parent与$children
通过访问 $parent 或者 $children 对象来访问组件实例中的方法和数据
子组件
<div><button @click="changeParent" type="button">{{value}}</button></div>
<script>
export default{
data(){
return{
value:'child'
}
},
methods: {
changeParent(e) {
this.$parent.$data.param1='change by child'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
父组件
<h1>{{param1}}</h1>
<fw-child></fw-child>
<button @click="changeChild" type="button">parent</button>
<script>
export default{
data(){
return{
param1: '123'
}
},
methods: {
changeChild(){
this.$children[0].$data.value='change by parent'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# $listeners
$listeners 属性会将父组件中的 (不含 .native 修饰器的) v-on 事件监听器传递给子组件，子组件可以通过访问 $listeners 来自定义监听器。
子组件
<div><input v-on="inputListeners" :value="value"/></div>
<script>
export default{
props: {
value: String
},
computed: {
inputListeners() {
let that = this;
return Object.assign({}, that.$listeners, {
input(e) {
that.$emit('input', e.target.value)
}
})
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
父组件
<h1>{{param1}}</h1>
<fw-input2 v-model="param1"></fw-input2>
<script>
export default{
data(){
return{
param1: '123'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# .sync
.sync 属性是个语法糖，可以很简单的实现子组件与父组件通信 子组件
<div><input @input="handleInput" :value="value"/></div>
<script>
export default{
props: {
value: String
},
methods: {
handleInput(e) {
this.$emit('update:value', e.target.value)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
父组件
<h1>{{param1}}</h1>
<fw-input3 :value.sync="param1"></fw-input3>
<script>
export default{
data(){
return{
param1: '123'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 兄弟组件通信
通过查找父组件中的子组件实现，this.$parent.$children，在 $children 中可以通过组件 name 查询到需要的组件实例，然后进行通信。
# 跨多层次组件通信
# provide / inject
子组件
<div>{{parentValue}}</div>
<script>
export default{
inject:['parentValue']
}
</script>
1
2
3
4
5
6
2
3
4
5
6
父组件
<deep-child></deep-child>
<script>
export default{
provide:{
parentValue:666
}
}
</script>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 任意组件
使用 Vuex 或者 Event Bus