如何在组件 VueJS 中传递焦点道具

Question

我有子组件 Input:

<template>
  <div class="basic-input-outer" :style="styles">
    <p class="paragraph-small">{{ title }}</p>
    <input ref="name" :type="type" class="basic-input">
  </div>
</template>

<script>
export default {
  name: "Input",
  props: ['type', 'styles', 'title', 'focus'],
  watch: {
    focus: function() {
      this.setFocus()
    }
  },
  methods: {
    setFocus() {
      this.$refs.name.focus()
    }
  }
}
</script>

<style lang="scss">
@import "../assets/css/components/Input";
</style>

我有父组件，我在其中使用此输入：

   <div class="login-options">
     <p class="choose" @click="chooseLogin('email')">With Email</p>
     <div class="vertical-line" />
     <p class="choose" @click="chooseLogin('phone')">With Phone Number</p>
   </div>

   <div v-if="loginWithEmail">
    <Input :focus="emailFocus" :title="'Email'" :type="'email'" />
   </div>
   <div v-else>
     <Input :focus="phoneFocus" :title="'Phone number'" :type="'email'" />
   </div>

...

chooseLogin(option) {
  if (option === 'email') {
    this.loginWithEmail = true
    this.emailFocus = true
  } else {
    this.loginWithEmail = false
    this.phoneFocus = true
  }
}

所以，问题是，当我触发该功能时，它只在一个字段上聚焦了一次，然后就停止了。我想让 focus props 以这种方式工作，因此当它被触发时，该字段将被聚焦，并且它不仅会工作一次，就像在这种情况下一样。

Answer 1

这是解决方案。其实是因为v-if。 v-if 只需从 DOM 中删除元素 (-s)，因此，解决此类问题的最佳方法是使用 display: none:

的条件样式

Input:

<template>
  <div class="basic-input-outer" :style="styles">
    <p class="paragraph-small">{{ title }}</p>
    <input ref="name" :type="type" class="basic-input">
  </div>
</template>

<script>
export default {
  name: "Input",
  props: ['type', 'styles', 'title', 'focus'],
  watch: {
    focus: function() {
      if (this.focus) this.$refs.name.focus()
    }
  }
}
</script>

<style lang="scss">
@import "../assets/css/components/Input";
</style>

父组件：

<Input :style="[!loginWithEmail ? {'display': 'none'} : {'': ''}]" :focus="emailFocus" :title="'Email'" :type="'email'" />
<Input :style="[loginWithEmail ? {'display': 'none'} : {'': ''}]" :focus="phoneFocus" :title="'Phone number'" :type="'email'" />

...

    chooseLogin(option) {
      if (option === 'email') {
        this.loginWithEmail = true
        this.emailFocus = true
        this.phoneFocus = false
      } else {
        this.loginWithEmail = false
        this.emailFocus = false
        this.phoneFocus = true
      }
    }

如何在组件 VueJS 中传递焦点道具

How to pass focus props in components VueJS

javascript

vue.js

nuxt.js