ue項目的一大亮點就是組件化。使用組件可以極大地提高項目中代碼的復用率，減少代碼量。但是使用組件最大的難點就是父子組件之間的通信。

• 子通信父

<template>
 <div class="parent">
 我是父組件
 <!--父組件監聽子組件觸發的say方法，調用自己的parentSay方法-->
 <!--通過:msg將父組件的數據傳遞給子組件-->
 <children :msg="msg" @say="parentSay"></children>
 </div>
</template>
<script>
import Children from './children.vue'
export default {
 data () {
 return {
 msg: 'hello, children'
 }
 },
 methods: {
 // 參數就是子組件傳遞出來的數據
 parentSay(msg){
 console.log(msg) // hello, parent
 }
 },
 // 引入子組件
 components:{
 children: Children
 }
}
</script>
<template>
 <div class="hello">
 <div class="children" @click="say">
 我是子組件
 <div>
 父組件對我說：{{msg}}
 </div>
 </div>
 </div>
</template>
<script>
 export default {
 //父組件通過props屬性傳遞進來的數據
 props: {
 msg: {
 type: String,
 default: ()=> {
 return ''
 }
 }
 },
 data () {
 return {
 childrenSay: 'hello, parent'
 }
 },
 methods: {
 // 子組件通過emit方法觸發父組件中定義好的函數，從而將子組件中的數據傳遞給父組件
 say(){
 this.$emit('say' , this.childrenSay);
 }
 }
 }
</script>

子組件使用$emit方法調用父組件的方法，達到子通信父的目的。

• 父通信子

 <!--Html-->
<template>
 <!--父組件觸發click方法-->
 <div class="parent" @click="say">
 我是父組件
 <!--通過ref標記子組件-->
 <children ref="child"></children>
 </div>
</template>
<script>
import Children from './children.vue'
export default {
 data () {
 return {
 msg: "hello,my son"
 }
 },
 methods: {
 // 通過$refs調用子組件的parentSay方法
 say(){
 this.$refs.child.parentSay(this.msg);
 }
 },
 // 引入子組件
 components:{
 children: Children
 }
}
</script>
<template>
 <div class="hello">
 <div class="children" >
 我是子組件
 <div>
 父組件對我說：{{msg}}
 </div>
 </div>
 </div>
</template>
<script>
 export default {
 data () {
 return {
 msg: ''
 }
 },
 methods: {
 // 父組件調用的JavaScript方法parentSay
 parentSay(msg){
 this.msg=msg;
 }
 }
 }
</script>

父組件通過$refs調用子組件的方法。

以上就是父子組件通信的方式，父子組件傳遞數據直接用props，或者使用$emit和$refs依靠事件來傳遞數據。

您的關注是我最大的動力