當前位置：首頁 > 前端技术 > vue >内容正文

vue

三十七、深入Vue.js组件Component（下篇）

發布時間：2024/10/8 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了三十七、深入Vue.js组件Component（下篇）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen
@Date：2020/7/4

人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾（作者：Runsen ）

作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！

今天進入vue-router和組件Component關系和通信的學習。vue 通信也是面試中非常高頻的問題，有很多面試題，都是圍繞通信展開。

文章目錄

組件關系
- 父子關系
- 兄弟組件
props
emit

幾種通信方式無外乎以下幾種：

Props（常用）
$emit (組件封裝用的較多)
$attrs 和 $listeners (組件封裝用的較多)
provide 和 inject （高階組件/組件庫用的較多）

先讓Runsen開始組件關系

組件關系

父子關系

父子關系即是組件 A 在它的模板中使用了組件 B，那么組件 A 就是父組件，組件 B 就是子組件。

兄弟組件

兩個組件互不引用，則為兄弟組件

跨級組件：就是在父子關系中，中間跨了很多個層級。

組件的構成：一個再復雜的組件，都是由三部分組成的： prop、 event、 slot，它們構成了 Vue.js 組件的 API。

props

props用于子組件接收來自父組件傳遞的數據。父組件可以將一條數據傳遞給子組件，這條數據可以是動態的，父組件的數據更改的時候，子組件接收的也會變化。

子組件被動的接收父組件的數據,子組件不要再更改這條數據了。

我們先看一個簡單的案例，代碼來自菜鳥教程

子組件需要顯式地用 props 選項聲明 “prop”，這里message就是prop。在對應的模板中使用message屬性就可以傳參。

下面我們看一個子組件從Vue實例中的data傳參。

<body><div id="app"><child :message="myMessage"></child> </div> <script> // 注冊 Vue.component('child', {// 聲明 propsprops: ['message'],template: '<span>{{ message }}</span>' }) // 創建根實例 new Vue({el: '#app',data() {return {myMessage:"hello world"}}, }) </script>

:message表明是從實例中的data取值，取值前，需要在注冊的時候聲明 props。

emit

接下來，我們就學習子組件→父組件通信。

相比父→子組件通信，子→父組件就稍微繁瑣一點。我們會使用到組件的一個知識點：自定義事件。

每一個vue實例都實現了事件接口，我們可以用它提供的API $emit( eventName)來觸發一個事件。

我先把標準代碼給出。

<body><div id="app"><son @connect="say"></son></div><script>Vue.component('son', {template: `<button @click="send">點擊</button>`,methods: {send() {this.$emit('connect');}}});const app = new Vue({el: "#app",methods: {say() {console.log(`大家好，我監聽到了事件connect的觸發`);}}});</script> </body>

注冊子組件，就是一個按鈕button，點擊它的時候，會觸發組件內部的send( )方法，而方法體里面會觸發一個事件，事件名取名為：“connect”。

然后我們就去父組件監聽這個事件‘connect’，監聽方式跟普通原生的事件一模一樣，也是用 v-on 指令，縮寫用@符號，我們采用縮寫來監聽。

我們設置了事件connect觸發的處理程序是一個say( )方法，我們補上say( )方法的定義：

下面就是代碼的最終效果

總結：父組件 A 通過 props 參數向子組件 B 傳遞數據，B 組件通過$emit向A組件發送一個事件（攜帶參數數據），A組件中監聽$emit 觸發的事件得到 B 向 A 發送的數據。

、

總結

以上是生活随笔為你收集整理的三十七、深入Vue.js组件Component（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。