這篇文章主要講解了“Vue中父子組件間通信的方法是什么”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue中父子組件間通信的方法是什么”吧！

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、成都微信小程序、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了京山免費建站歡迎大家使用！

1、父組件傳遞給子組件

• 父組件傳遞給子組件：通過props屬性；

• 子組件傳遞給父組件：通過$emit觸發(fā)事件；
  

?
這里我們知道，父組件有一些數(shù)據(jù)需要子組件來進行展示，那我們可以通過props來完成組件之間的通信

通過props來完成組件之間的通信

2、淺談Props

那么什么是Props呢？

• 作用：接受父組件傳遞過來的屬性

• Props是你可以在組件上注冊一些自定義的attribute（屬性）；

• 父組件給這些attribute（屬性）賦值，子組件通過attribute的名稱獲取到對應的值；

在使用 script setup的單文件組件中，props 可以使用 defineProps() 宏來聲明：

const props = defineProps(['foo'])

console.log(props.foo)

1）數(shù)組類型

在沒有使用 script setup 的組件中，prop 可以使用 props 選項來聲明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作為第一個參數(shù)
    console.log(props.foo)
  }
}

例子，對象語法的使用

• App.vue里面使用組件，屬性整數(shù)props所定義的

• showInfo.vue子組件

 export default {
        props:{
            name :{
                type:String,
                default:"我是默認值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

另外：
那么type的類型都可以是哪些呢？

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

2）對象類型

用對象的形式聲明props（這個還挺常用的）

使用 script setup

defineProps({
  title: String,
  likes: Number
})

非 script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

3、子組件傳遞給父組件

子組件傳遞給父組件通過$emit觸發(fā)事件

?
子組件傳遞內(nèi)容到父組件：

• 當子組件有一些事件發(fā)生的時候，比如在組件中發(fā)生了點擊，父組件需要切換內(nèi)容；

• 子組件有一些內(nèi)容想要傳遞給父組件的時候；

$emit(“add”, count)
第一個參數(shù)自定義的事件名稱，第二個參數(shù)是傳遞的參數(shù)

舉一個計數(shù)器案例

• 這里我們有兩個子組件，一個父組件

• 子組件中定義好在某些情況下觸發(fā)的事件名稱

• 在父組件中以v-on（語法糖@）的方式傳入要監(jiān)聽的事件名稱，并且綁定到對應的方法中；

• 最后，在子組件中發(fā)生某個事件的時候，根據(jù)事件名稱觸發(fā)對應的事件

1）父組件App.vue

• 父組件監(jiān)聽子組件加或減的事件，通過子組件發(fā)生事件給父組件監(jiān)聽

• 父組件監(jiān)聽子組件發(fā)出的自定義事件，然后執(zhí)行相應的操作

2）子組件1AddCounter.vue

這里定義的是計數(shù)器的加操作
子組件事件觸發(fā)之后，通過this.$emit的方式進行發(fā)出事件

3）子組件2SubCounter.vue

這里定義的是計數(shù)器的減操作

子組件事件觸發(fā)之后，通過this.$emit的方式進行發(fā)出事件

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

感謝各位的閱讀，以上就是“Vue中父子組件間通信的方法是什么”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Vue中父子組件間通信的方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！