Javascript 在VueJS中将prop value用作变量

在VueJS中将prop value用作变量时，我遇到了一个问题。我有一个组件，我将其传输到prop：

这是父组件：

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

<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

调用方法。示例：this.$refs.UploadAvatarModal.hide（）或this.$refs.UploadAvatarModal2.hide（）由道具值更改？？？

您可以通过以下操作访问道具：

this.propName

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

this.id

因此，您编写的这一行。$refs.id.hide（）应该是：

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

但是它可能什么也不做，因为.hide（）是一个jquery函数。 在纯javascript中，您需要执行以下操作：

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

也就是说，这样做可能不是个好主意。

---

使用vue，显示/隐藏组件的最佳方式可能是使用

v-if

或

v-show

您可以通过以下方式访问道具：

this.propName

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

this.id

因此，您编写的这一行。$refs.id.hide（）应该是：

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

但是它可能什么也不做，因为.hide（）是一个jquery函数。 在纯javascript中，您需要执行以下操作：

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

也就是说，这样做可能不是个好主意。

---

使用vue，显示/隐藏组件的最佳方式可能是使用

v-if

或

v-show

您可以使用子id将自定义事件从子组件发送到父组件，然后在父组件中，您可以使用v-if或v-show隐藏模态。这不是隐藏模态的方法。你有什么办法吗？我不知道你到底想做什么。请解释清楚你想传递一个元素id来用jquery隐藏它吗？如果是，那么在vuejs中就不应该这样做。就像@CaShiS所说的，您需要将一个事件从一个子项传递给父项以隐藏一个子项。我的建议是不要将jquery与vuejs一起使用，而是按原样使用vuejs（除非确实需要jquery）@DuyAnh在使用vuejs时没有必要使用jquery。您可以使用子id将自定义事件从子组件发送到父组件，然后在父组件中使用v-if或v-show隐藏模态。这不是隐藏模态的方法。你有什么办法吗？我不知道你到底想做什么。请解释清楚你想传递一个元素id来用jquery隐藏它吗？如果是，那么在vuejs中就不应该这样做。就像@CaShiS所说的，您需要将一个事件从一个子项传递给父项以隐藏一个子项。我的建议是不要在vuejs中使用jquery，而是按原样使用vuejs（除非确实需要jquery）@DuyAnh在使用vuejs时，没有真正的必要使用jquery。