Question

我在使用prop值作为VueJS中的变量时遇到了问题。我有一个组件，我转发道具：

这是父组件：

<template>
  <div class="a">
    <UploadAvatarModal
      apiurl="upload_avatar"
      id="UploadAvatarModal"
    />
  </div>
</template>

这是UploadAvatarModal组件的脚本：

<template>
  <div class="a">
     ...
  </div>
</template>
<script>
export default {
  props: {
    id: String,
    apiurl: String
  },
  methods: {
    def: function () {
      this.$refs.id.hide()
    }
  }
}
</script>

在此行中：this.$refs.id.hide()如何根据prop id调用方法。示例：此。$ refs。 UploadAvatarModal .hide（）或者。$ refs。 UploadAvatarModal2 .hide（）更改为道具值？

Answer 1

您可以访问道具：

this.propName

要访问id prop，您需要执行以下操作：

this.id

所以你写的this.$refs.id.hide()行应写成：

this.$refs[this.id].hide()

但它可能什么都不做，因为.hide（）是一个jquery函数。在简单的javascript中你需要做：

this.$refs[this.id].style.display = 'none'

那就是说，这样做可能不是一个好主意。使用vue，显示/隐藏组件的最佳方式可能是使用v-if或v-show

将prop值用作VueJS中的变量

1 个答案: