Vue 如何使用v-model与自定义input组件数据双向绑定？

我们都知道Vue中的 v-model 可以与input框进行数据双向绑定

<template>
  <div class="home">
    <input type="text" v-model="val" />
    {{ val }}
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      val: "",
    };
  },
};
</script>

这个想必大家都会，就不过多介绍了。我今天要分享的是如何使用v-model与自定义组件数据双向绑定，因为默认的搜索框样式功能都很少，所以我们需要自己封装一个input组件。话不多说，直接进入主题。

先跟大家分享一下不用v-model是怎样实现的
首先需要新建一个组件，这里使用的是Input.vue，代码如下

<template>
  <!-- Input.vue -->
  <div>
    <input type="text" :value="val" @input="change" />
  </div>
</template>

<script>
export default {
  name: "my-input",
  props: {
    val: String,
  },
  methods: {
    change(e) {
      let val = e.target.value;
      this.$emit("change", val);
    },
  },
};
</script>

页面代码

<template>
<!-- Home.vue -->
  <div class="home">
    <Input :val="val" @change="change" />
    {{ val }}
  </div>
</template>

<script>
import Input from "@/components/Input";
export default {
  name: "Home",
  components: {
    Input,
  },
  data() {
    return {
      val: "",
    };
  },
  methods: {
    change(val) {
      this.val = val;
    },
  },
};
</script>

这里用到的是子父组件传值。首先把val通过自定义数据传到子组件里，当子组件数据发生变化时，再把数据通过自定义事件传给父组件。

v-model在组件上使用也是类似的思路，只不过是Vue帮我们了。

自定义组件v-model
官网跟我们说了，组件使用v-model使用了自定义数据value和自定义方法input

<template>
  <!-- Input.vue -->
  <div>
    <input type="text" :value="value" @input="change" />
  </div>
</template>

<script>
export default {
  name: "my-input",
  props: {
    value: String,
  },
  methods: {
    change(e) {
      let val = e.target.value;
      this.$emit("input", val);
    },
  },
};
</script>

<template>
  <!-- Home.vue -->
  <div class="home">
    <Input v-model="val" />
    {{ val }}
  </div>
</template>

<script>
import Input from "@/components/Input";
export default {
  name: "Home",
  components: {
    Input,
  },
  data() {
    return {
      val: "",
    };
  },
};
</script>

可以看到Home.vue使用了v-model后精简了很多，只需要一个写v-model把值传过去。
Input.vue中把接受值改为value，然后当数据变化时，通过自定义事件input传过去。就可以进行组件数据双向绑定了。

这也是2020年的最后一天了，最后，祝大家新年快乐喽！

---

你学费了吗

给楼主点个关注吧，不定期分享干货