三十七、深入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 就是子組件。
<script>// 注冊一個子組件Vue.component('child', {data() {return {text:"我是father的子組件"}},template:"<span>{{text}}</span>"})// 注冊一個父組件Vue.component('father', {// 在模板中使用了child組件template:"<div><child></child></div>"}) </script>兄弟組件
兩個組件互不引用，則為兄弟組件
<script>// 注冊一個兄弟組件Vue.component('borther1', {data() {return {text:"我是borther1"}},template:"<span>{{text}}</span>"})// 注冊一個兄弟組件Vue.component('borther2', {data() {return {text:"我是borther2"}},template:"<span>{{text}}</span>"}) </script>跨級組件：就是在父子關系中，中間跨了很多個層級。
組件的構成：一個再復雜的組件，都是由三部分組成的： prop、 event、 slot，它們構成了 Vue.js 組件的 API。
props
props用于子組件接收來自父組件傳遞的數據。父組件可以將一條數據傳遞給子組件，這條數據可以是動態的，父組件的數據更改的時候，子組件接收的也會變化。
子組件被動的接收父組件的數據,子組件不要再更改這條數據了。
我們先看一個簡單的案例，代碼來自菜鳥教程
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="app"><child message="hello!"></child> </div> <script> // 注冊 Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實例中像 "this.message" 這樣使用template: '<span>{{ 0 }}</span>'# template: '<span>{{ message }}</span>' 和上句完全一樣 }) // 創建根實例 new Vue({el: '#app' }) </script>子組件需要顯式地用 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（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是大宗交易 又称为大宗买卖
- 下一篇： 三十八、Vue项目上手 | 用户管理系统