javascript - 如何在单击时将 Prop 传递给子组件 - Vue2

Question

代码背后的想法是，当我在父 vue 中单击子组件时，使其处于事件状态。

父vue文件:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

子组件:

props: {
  selected: Boolean
},

data () {
  return {
    selected: selected
  }
},

如何在单击时将 selected 属性发送到子组件？如果我这样设置:

<PackageItem
  :selected="true"
  @click.native="selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
>

这将使所有项目选择为true，我想仅在单击时将其设置。

Answer 1

你可以这样做:

<PackageItem
  v-for="pack in packagesData"
  :key="pack.id"
  @click.native="
    selectPackageItem(pack.id, pack.humanLabel, pack.humanPrice, pack.index)"
  :selected="selected[pack.id]"
>

其中 selectedPackageItem 方法将设置选定的包:

selectPackageItem(packId, packLabel, packPrice, packIndex) {
    this.$set('selected', packId, true)

或者，如果您想在点击时在 true 和 false 之间切换:

this.$set('selected', packId, !this.selected[packId])

在数据选项中，您应该:

selected: []

<小时/>

此外，在您的子组件中不需要以下代码:

/* REMOVE
 data () {
   return {
     selected: selected
   }
 },
*/

当您想在脚本内使用选定的 Prop 时，您只需使用 this.selected ，而在模板内只需使用 selected 即可。