Могу ли я реализовать `v-модель` самостоятельно? - PullRequest
Новая
       14

Могу ли я реализовать `v-модель` самостоятельно?

0 голосов
/ 14 апреля 2020

Я выучил vue пользовательскую директиву сегодня и начинаю интересоваться, могу ли я написать пользовательскую директиву, которая выполняет ту же функцию, что и v-model. но я затрудняюсь сделать двустороннюю привязку в хуках директивы, какая-нибудь помощь?

1 Ответ

0 голосов
/ 14 апреля 2020

Да, вы должны передать value реквизиты вашему компоненту, а затем emit input для изменения value Например: у нас есть компонент ввода: 

<template>
  <input :value="innerValue" @input="change($event.target.value)">
</template>

<script>
export default {
  name: "TextField",
  props: ["value"],
  computed: {
    innerValue() {
      return this.value;
    }
  },
  methods: {
    change(e) {
      console.log(e);
      this.$emit("input", e);
    }
  }
};
</script>

, и мы используем его в родительском компоненте компонент: 

<template>
  <div id="app">
    <text-field v-model="value"/>
  </div>
</template>

<script>
import TextField from "./components/TextField";

export default {
  name: "App",
  components: {
    TextField
  },
  data: () => ({
    value: ""
  })
};
</script>
...