vue父子元件之間是如何進行傳值的

這篇文章給大家分享的是關於vue父子元件之間是如何進行傳值的，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。

背景：最近在做vue的項目，因為頁面的邏輯比較複雜，程式碼量較多，所以就想抽離一些元件放到component裡面。問題就隨之來了。
因為vue不提倡在子元件中修改父元件的值，所以如果要這樣操作的話就要麻煩一步，而我正好需要這樣的操作，於是就查閱了資料
先上父元件的程式碼，引用了exp-group子元件

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible 和grpData 是傳給子元件的屬性，一個是普通型別，一個是物件

grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

接下來我要在子元件中改變這兩個屬性的值傳給父元件，先在子元件中定義一下

props: {
  grpVisible: {
    type: Boolean,
    default: false
  },
  grpData: {
    type: Object
  }
},

首先普通類型的grpVisible 屬性如果要修改，需要定義一個變數將grpVisible 值複製給這個變數，然後再修改這個變量，傳遞給父元件，具體見程式碼

let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件

父元件透過acceptData的參數value接收這個值

acceptData (value) {
  console.log(value)
}, //父组件

如果是物件的話，就需要用Object.assign拷貝一份新的賦值給一個變量，然後修改這個變量，傳遞給父組件，代碼如下：

let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)

相關推薦：

vue如何利用樹形控制項z- tree動態新增資料

JavaScript利用DOM如何實作圖片切換？

以上是vue父子元件之間是如何進行傳值的的詳細內容。更多資訊請關注PHP中文網其他相關文章！