【Vue】引数の中の波カッコ ({ })について。変数 or オブジェクトどちらで渡すか

引数のカッコ( )の中に { }が使われている記述があったので調べてみた。


・` :disabled="!btn.isActive({a, b})"`
・` :disabled="!btn.isActive({a: b})"`

どちらも**変数ではなく、プロパティ名でデータを渡している**。このため**受け取る側もプロパティ名でデータを受け取る**。

上記２つは似ているが渡すデータの内容は異なる。

親から子のテンプレートへデータを渡す場合を考えてみる。


##使い方

データバインディング　
` :disabled="!btn.isActive({a, b})"`
の場合。

ページ内で定義しているデータa, bをプロパティ名として渡している。

受け取る側のメソッドもプロパティとして値を受け取る。

```js:
const calcA = (({b}) => b > 5 ) //プロパティbの値が5以上でtrue

const btns = [
  {
  // 変数calcAが入る
  isActive: calcA,
  },
]
```


###({a: b})の場合

これは、**変数bの値を新たなプロパティ名aに代入**する意味になる。

受け取り側はプロパティ名aで受け取るが、実際の中身はbになる。



<br>
##実例
` :disabled="!btn.isActive({a, b})"`の場合。

```vue:親ファイル
<template>
  <div>
      <v-btn v-for="btn in btns" 
        :key="btn.id"
        <!-- 変数a,bの値をプロパティとして渡す -->
        :disabled="!btn.isActive({a, b})"
        >
        {{btn.text}}
      </v-btn>
  </div>
</template>

<script>
//TmpArgsChild.jsから変数btnsをインポート
import btns from "./TmpArgsChild"

export default {
  data(){
    return{
      //jsのbtnsをvueに変換
      btns: btns,

      a: 10,
    }
  },
  computed:{
    b(){return this.a/2}   //5
  }
}
</script>
```

```js:（子ファイル）TmpArgsChild.js
const calcA = (({a}) => a > 5 )  //true
const calcB = (({a}) => a < 5 )  //false
const calcC = (({a}) => a == 5 ) //false
const calcD = (({a}) => a == 10 )  //true

const btns = [
  {
  text: "aaa",
  isActive: calcA,
  },
  {
  text: "bbb",
  isActive: calcB,
  },
  {
  text: "ccc",
  isActive: calcC,
  },
  {
  text: "ddd",
  isActive: calcD,
  },
]

export default btns
```


a:10が渡されるので、trueになるのは`(({a}) => a > 5 )`と、`(({a}) => a == 10 )`の２つになる。`!`があるので、最終的に、disabled:trueとなるのは残りの２つ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/324558ff-564e-c576-fa7d-f920942b4af6.png)



<br>
##新たなプロパティを定義する場合
・` :disabled="!btn.isActive({a: b})"`の場合

`{新たなプロパティ名: 既存の変数}`となる。つまり、変数bの値をプロパティaに格納することになる。


```vue:親ファイル
<template>
  <div>
      <v-btn v-for="btn in btns" 
        :key="btn.id"
        <!-- 変数a,bの値をプロパティとして渡す -->
        :disabled="!btn.isActive({a: b})"
        >
        {{btn.text}}
      </v-btn>
  </div>
</template>

<script>
//TmpArgsChild.jsから変数btnsをインポート
import btns from "./TmpArgsChild"

export default {
  data(){
    return{
      //jsのbtnsをvueに変換
      btns: btns,

      a: 10,
    }
  },
  computed:{
    b(){return this.a/2}   //5
  }
}
</script>
```

子ファイルは先ほどと全く同じだが、渡されるデータはbの入ったプロパティaになるため結果が異なる。

```js:（子ファイル）TmpArgsChild.js
const calcA = (({a}) => a > 5 )  //true
const calcB = (({a}) => a < 5 )  //false
const calcC = (({a}) => a == 5 ) //false
const calcD = (({a}) => a == 10 )  //true

const btns = [
  {
  text: "aaa",
  isActive: calcA,
  },
  {
  text: "bbb",
  isActive: calcB,
  },
  {
  text: "ccc",
  isActive: calcC,
  },
  {
  text: "ddd",
  isActive: calcD,
  },
]

export default btns
```

a: 5が渡されるため、trueになるのは`(({a}) => a == 5 )`。`!`がつくため、disabled:trueになるのは、残りの３つの要素。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/bb1b0a6f-c6e6-30cb-28e4-1ffed3defb11.png)



##複数の引数を渡す場合

上記で使った方法を織り交ぜて、複数引数をプロパティとして渡すことができる。

```js:親ファイルの記述
:disabled="!btn.isActive( {selectedCells, maxColNum, row: innerValue})"
```

受け取り側はそれぞれ使いたいプロパティを`({ プロパティ名 })`として引数に入れればいい。

```js:子ファイルの記述例
const anySelectedCells = ({selectedCells}) => selectedCells.length > 0

const singleSelectedCell = ({selectedCells}) => selectedCells.length === 1

const notAllColumnsSelected = ({ selectedCells, maxColNum }) => {
  const uniqueCellIndices = new Set(
    selectedCells.map((cell) => cell.cellIndex)
  )
  return uniqueCellIndices.size != maxColNum
}

const notAllRowsSelected = ({ selectedCells, rows }) => {
  const uniqueRowIndices = new Set(
    selectedCells.map((cell)=> cell.rowIndex)
  )
  return uniqueRowIndices.size != rows.length
}



const commands = [
  {
    cmd: 'addColumnBefore',
    text:"左に列追加",
    icon: 'mdi-table-column-plus-before',
    isActive: singleSelectedCell,
  },
  {
    cmd: 'addColumnAfter',
    text:"右に列追加",
    icon: 'mdi-table-column-plus-after',
    isActive: singleSelectedCell,
  },
  {
    cmd: 'removeColumn',
    text:"列削除",
    icon: 'mdi-table-column-remove',
    color: 'error',
    isActive: (params) => anySelectedCells(params) && notAllColumnsSelected(params),
  },
  {
    cmd: 'addRowAfter',
    text:"下に行追加",
    icon: 'mdi-table-row-plus-after',
    isActive: singleSelectedCell,
  }

export default commands
```

・`row: innerValue`
変数innerValueをプロパティ名rowとして渡しているため、使うのはrowのみ。（innerValueは記述しない）

・`({selectedCells})`
プロパティselectedCellsのみ使用。

・`({ selectedCells, rows })`
プロパティselectedCellsとrowsを使用。


使いたい処理毎に変数を指定することができるため、**個別の処理を複数書きたい場合に便利なデータ受け渡し方法**となっている。


正式名称は引数分割束縛というらしい。