我们都知道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传过去。就可以进行组件数据双向绑定了。
