vue元件傳值-父子-兄弟傳值

vue元件傳值

元件傳值應用非常廣泛，将元件抽離，檔案格式更加規範。首先說明元件之間的關系，父子，兄弟，常用的元件為父子元件。

1、單獨編寫的vue檔案就是一個子元件，假定名稱為tableList，将該元件導入到其他頁面時，一般用

<table-list></table-list>

這種樣式呈現。

<table-list></table-list>

所在的元件就是父元件。父子元件通過傳值來改變目前狀态。注意，父元件導入子元件，要在component中挂載才能使用哦！

父元件傳值形式通常為：

// 父元件中
<table-list v-show="have" 
:data="tableData" 
:total="total" 
:categoryId="categoryId" 
:listQuery="listQuery"
>
></table-list>
           

2、想要傳遞的資料直接：綁定就可以。子元件用來接收時，要在子元件中通過props獲得，props和data是同級哦，是以data中的資料怎麼拿，props中的就怎麼拿。

// 子元件中
props: {
    data: {
      type: Array
    },
    total: {
      type: Number
    },
    listQuery: {
      type: Object
    },
    categoryId: {
      type: String
    }
  }
           

傳遞過來如何用呢，接收了要使用的呀。注意以下:data=“data”,引号中的data就是傳遞過來的data，此時才完成了父元件傳值給子元件，子元件接收，子元件使用的完整流程。

<el-table
        ref="multipleTable"
        :data="data"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
           

父傳子很簡單，子傳父同樣道理，不過要通過事件觸發。子元件往往不隻是用來簡單展示，還要有一些操作，比如對表格的增删改。新增一條資料就要重新整理重新請求該頁資料，重新整理就要改變子元件綁定的資料

：data = data

，vue中子元件不能直接修改父元件傳遞過來的資料，是以這就是子傳父的重要應用場景。

還是那個子元件，但是父元件中使用時綁定了一個事件，這個事件名時自定義的。此處叫

expandChoose

<table-list v-show="have" 
:data="tableData" 
:total="total" 
:categoryId="categoryId" 
:listQuery="listQuery"
@expandChoose="expandChoose"
>
></table-list>
           

比如新增事件，通過

this.$emit('父元件上的自定義事件名')

，後面的參數想傳什麼加在後面就行，如下

add() {
      this.$emit('expandeChoose', 參數1，2，...)
    },
           

傳遞過去了如何接受呢，同樣要用的呀。

// 父元件中
expandChoose(a，b,c) {
      //這個事件就可以拿到傳遞過來的參數，比如新增事件要重新整理表格資料
      // 直接讓父元件重新指派即可，這個資料會通過父傳子，響應到子元件上
      this.findAll(a)
},
// 父元件的方法修改了資料
findAll() {
	findAllCustomer(a).then(res => {
		this.tableData = res.data.list
	})
}
           

總結流程就是，子元件通過事件，觸發綁定在父元件上的自定義，自定義事件處理資料綁定到父元件上，父元件傳遞給子元件。子—父---子的形式。兄弟傳值道理相同，隻不過要建立一個中間橋梁。在任意位置建立一個bus.js檔案。

import Vue from 'vue'
const Bus = new Vue()
export default Bus
           

就是又建立了一個vue執行個體。如何使用呢？首先兄弟兩個要同僚引入這個bus.js，路徑就是這個檔案所在的位置。同樣通過事件觸發。格式為Bus.$emit(‘自定義事件名’，參數1，2，…)

// 兄弟元件1
add() {
        Bus.$emit('sendByBus', name,age)
    },
           

如何接受呢？格式如下：要在mounted中Bus.$on(‘自定義事件名’，參數1，2)

// 兄弟元件2
mounted() {
    Bus.$on('sendByBuser', (a,b) => {
      // 這裡将傳遞過來的資料做處理
    })
}
           

總結：通過中間橋梁傳遞，但是不太推薦使用，大部分情況父子元件互相傳值都能解決。