我可以自己实现“v-model”吗？答案

【问题标题】：Can I implement `v-model` by me own?我可以自己实现“v-model”吗？
【发布时间】：2020-07-27 08:37:09
【问题描述】：

我今天学习了 vue 的 自定义指令，并开始怀疑我是否可以编写一个与 v-model 功能相同的自定义指令。但是我发现在指令的钩子中进行双向绑定有困难，有什么帮助吗？

【问题讨论】：

【解决方案1】：

是的，您应该将 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>

【讨论】：