Katakanlah jika saya memiliki masukan khusus

<template>
  <input v-model="value"/>
</template>

<script>
export default {
  name: "my-input",
  props: {
    value: String
  }
}
</script>

Bagaimana saya bisa memberikan nilainya ke elemen induk

<template>
  <my-input v-model="test"/>
  <button @click="check">see value</button>
</template>

<script>
export default {
  methods: {
    check() {
      console.log(this.test);
    }
  }
}
</script>

Ketika saya menekan tombol itu menunjukkan undefined. saya mengharapkannya mengembalikan nilai input saya.

Bagaimana saya bisa memberikan nilai darinya? saya mencoba v-model dan :value, keduanya menunjukkan undefined.

Maaf untuk bahasa inggris saya

1
nouvist 20 November 2020, 16:03

1 menjawab

Jawaban Terbaik

Ikat nilai input ke prop value lalu tambahkan event @input yang memancarkan nilai input ke komponen induk :

<template>
  <input :value="value" @input="$emit('input', $event.target.value)"/>
</template>

<script>
export default {
  name: "my-input",
  props: {
    value: String
  }
}
</script>
1
Boussadjra Brahim 20 November 2020, 13:09