我們都知道Vue中的 v-model 可以與input框進(jìn)行數(shù)據(jù)雙向綁定
<template>
<div class="home">
<input type="text" v-model="val" />
{{ val }}
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
val: "",
};
},
};
</script>
這個(gè)想必大家都會(huì)衷旅，就不過(guò)多介紹了。我今天要分享的是如何使用v-model與自定義組件數(shù)據(jù)雙向綁定课锌，因?yàn)槟J(rèn)的搜索框樣式功能都很少厨内，所以我們需要自己封裝一個(gè)input組件。話不多說(shuō)渺贤，直接進(jìn)入主題雏胃。
先跟大家分享一下不用v-model是怎樣實(shí)現(xiàn)的
首先需要新建一個(gè)組件，這里使用的是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>
頁(yè)面代碼
<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通過(guò)自定義數(shù)據(jù)傳到子組件里，當(dāng)子組件數(shù)據(jù)發(fā)生變化時(shí)述雾，再把數(shù)據(jù)通過(guò)自定義事件傳給父組件街州。
v-model在組件上使用也是類似的思路，只不過(guò)是Vue幫我們了玻孟。
自定義組件v-model
官網(wǎng)跟我們說(shuō)了唆缴，組件使用v-model使用了自定義數(shù)據(jù)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后精簡(jiǎn)了很多，只需要一個(gè)寫v-model把值傳過(guò)去黍翎。
Input.vue中把接受值改為value面徽，然后當(dāng)數(shù)據(jù)變化時(shí)，通過(guò)自定義事件input傳過(guò)去。就可以進(jìn)行組件數(shù)據(jù)雙向綁定了趟紊。
