vue2中如何自定義組件的v-model

更新時間：2022年08月02日 09:48:23 作者：風(fēng)如也

這篇文章主要介紹了vue2中如何自定義組件的v-model，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何自定義組件的v-model

工作中經(jīng)常會涉及到父子組件數(shù)據(jù)更新和頁面相應(yīng)數(shù)據(jù)樣式改變的問題。

通俗點來說，就是涉及到公共組件的可以抽離出來作為子組件，如果父組件中與子組件相關(guān)的數(shù)據(jù)改變，子組件中的數(shù)據(jù)也會改變，如果子組件的數(shù)據(jù)改變，則需要做一定的處理才能改變父組件中的相關(guān)數(shù)據(jù)。

處理方式：考慮使用自定義組件的v-model（vue2 中方式）

父組件

<search-tab :list="list" v-model="active" />
...
export default {
?? ?data(){
?? ??? ?return {
?? ??? ??? ?list: [],
?? ??? ??? ?active: 0
?? ??? ?}
?? ?}
}
...

子組件 SearchTab

<el-tabs :value="active" @tab-click="handleClick">
? <el-tab-pane v-for="(item, key) in list" :key="key" :label="item.name" :name="item.value"></el-tab-pane>
</el-tabs>

...
export default {
? name: 'SearchTab',
? props: {
? ? active: {
? ? ? type: Number,
? ? ? default: 0
? ? },
? ? list: Array
? },
? model: {
? ? prop: 'active',
? ? event: 'changeActive'
? },
? methods: {
? ? handleClick(val) {
? ? ? this.$emit('changeActive', val.name)
? ? }
? }
}
...

這種方式如果涉及到選中組件的選中樣式問題，能夠響應(yīng)式

而如果我們不用自定義組件的 v-model 方法，而是普通的父子組件通信，子組件改變父組件的值通過子組件中聲明的另一個來作為中間變量，監(jiān)聽中間變量的值來改變父組件中的值，這種方式雖然能改變值，但是選中樣式卻不能及時更新。

子組件示例

<el-tabs :value="active" @tab-click="handleClick">
? <el-tab-pane v-for="(item, key) in list" :key="key" :label="item.name" :name="item.value"></el-tab-pane>
</el-tabs>

...
export default {
? name: 'SearchTab',
? props: {
? ? name: String,
? ? activeTab: {
? ? ? type: String,
? ? ? default: '0'
? ? },
? ? list: Array
? },
? data() {
? ? return {
? ? ? active: this.activeTab
? ? }
? },
? watch: {
? ? active() {
? ? ? this.activeTab = this.active
? ? }
? },
? methods: {
? ? handleClick(val) {
? ? ? console.log(val)
? ? }
? }
}
...

vue2與vue3在自定義組件v-model的區(qū)別

在vue開發(fā)中，通常會對一個自定義的組件進行封裝，并實現(xiàn)v-model雙向綁定功能

在vue2中，通常這樣實現(xiàn)

父組件

<template>
? <Child v-model="number"></Child> ? ?
</template>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? number: 0
? ? ? }
? ? },
? ? components: {
? ? ? Child: () => import("./Child.vue")
? ? }
? }
</script>

子組件

<template>
? <button @click="handleClick">{{ value }}</button>
</template>

<script>
? export default {
? ? props: {
? ? ? value: Number
? ? },
? ? methods: {
? ? ? handleClick() {
? ? ? ? // 通過emit一個input事件出去，實現(xiàn) v-model
? ? ? ? this.$emit('input', this.value + 1)
? ? ? }
? ? }
? }
</script>

在vue3中，通過這樣實現(xiàn)

父組件

<template>
? <Child v-model="number"></Child> ? ?
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
? setup() {
? ? const number = ref(0);
? ? return {
? ? ? number
? ? };
? },
});
</script>

子組件

<template>
? <button @click="handleClick">{{ value }}</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
? props: {
? ? // 更換成了 modelValue
? ? modelValue: Number
? },
? setup(props, { emit }) {
? ? // 關(guān)閉彈出層
? ? const handleClick = () => emit('update:modelValue', props.modelValue + 1);
? ? return { handleClick };
? },
});
</script>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: