父子組件通信包括：
- 父組件調(diào)用子組件的方法竿秆、子組件調(diào)用父組件的方法、
- 父組件改變子組件的屬性值凌外、子組件改變父組件的屬性值末早。
細(xì)分起來這是四種情況烟馅，其實(shí)可以總結(jié)為兩種：
1. 父組件通過調(diào)用子組件方法改變子組件的屬性值、
2.子組件通過調(diào)用父組件方法改變子組件值
換言之然磷，明白怎么父調(diào)子方法郑趁，子調(diào)父方法，就知道怎么改變屬性值了姿搜。
父調(diào)子：
1. 通過給子組件設(shè)置ref
// 父組件 father.vue:
<template>
<div class="father">
I'm {{name}}穿撮， and {{sonName}}'s father
<child :father="name" ref="child" />
<button @click="changeName('大頭')"></button>
</div>
</template>
<script>
import child from "./child"
export default {
name: "father",
data () {
return {
name: "小頭爸爸",
sonName: "",
changeName: null
}
},
mounted () {
this.sonName = this.$refs.child.name;
this.changeName = this.$refs.child.changeName;
},
methods: {
showFatherName () {
alert(`I'm a father, call me ${this.name}`)
}
},
components: {
child
}
}
</script>
// 子組件 child.vue
<template>
<div>
I'm {{name}}
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
name: "大頭兒子"
}
},
methods: {
changeName (name) {
this.name = name
}
}
}
</script>
這樣通過vm.$refs.child直接就能調(diào)用子組件的方法改變子組件屬性，或者使用子組件的某些變量痪欲。 以上點(diǎn)擊按鈕悦穿，就可以通過調(diào)用子組件的changeName改變子組件的name了，效果如下圖
父調(diào)子.gif
子調(diào)父：
1. 通過 vm.$parent 直接調(diào)用
// 父組件
<template>
<div class="father">
I'm {{name}}业踢， and {{sonName}}'s father
<child :fatherName="name" />
<button @click="changeName('大頭')"></button>
</div>
</template>
<script>
import child from "./child"
export default {
name: "father",
data () {
return {
name: "小頭爸爸",
sonName: "",
changeName: null
}
},
methods: {
showName () {
alert(`I'm a father, call me ${this.name}`)
}
},
components: {
child
}
}
</script>
// 子組件 child.vue
<template>
<div>
I'm {{name}}栗柒，and {{fatherName}}'s son.
<button @click="changeName">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
name: "大頭兒子"
}
},
methods: {
changeName (name) {
return this.$parent.showName()
}
}
}
</script>
2. 通過 props 引用父組件的方法
// 父組件 father.vue:
<template>
<div class="father">
I'm {{name}}， and {{sonName}}'s father
<child :fatherName="name" changeName="showName" />
</div>
</template>
<script>
import child from "./child"
export default {
name: "father",
data () {
return {
name: "小頭爸爸",
sonName: "",
changeName: null
}
},
methods: {
showName () {
alert(`I'm a father, call me ${this.name}`)
}
},
components: {
child
}
}
</script>
// 子組件 child.vue
<template>
<div>
I'm {{name}}, and {{fatherName}}'s son.
<button @click="changeName">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
name: "大頭兒子"
}
},
props: {
fatherName: {
type: String
},
changeName: {
type: String
}
}
}
</script>
通過 $emit 調(diào)用父組件的方法
// 父組件 father.vue:
<template>
<div class="father">
I'm {{name}}， and {{sonName}}'s father
<child :fatherName="name" @showName="showName" />
</div>
</template>
<script>
import child from "./child"
export default {
name: "father",
data () {
return {
name: "小頭爸爸",
sonName: ""
}
},
methods: {
showName (name) {
alert(`I'm a father, call me ${name}`)
}
},
components: {
child
}
}
</script>
// 子組件 child.vue
<template>
<div>
I'm {{name}}, and {{fatherName}}'s son.
<button @click="changeName">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
name: "大頭兒子"
}
},
props: {
fatherName: {
type: String
}
},
methods: {
changeName: {
return this.$emit("showName", "小頭爸爸")
}
}
}
</script>
三種方式實(shí)現(xiàn)的效果一樣瞬沦，圖如下
子調(diào)父.gif
以上是父子組件相互間調(diào)用方法的例子太伊，如果想子改變父變量或者父改變子的變量，直接在調(diào)用的方法里修改就行逛钻。
