vue自定義組件如何通過v-model指令控制組件的隱藏、顯示

更新時間：2022年05月31日 14:50:17 作者：夢一場江南煙雨

這篇文章主要介紹了vue自定義組件如何通過v-model指令控制組件的隱藏、顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

通過v-model指令控制組件的隱藏、顯示

在開發(fā)項(xiàng)目的過程中，我們通常會有自定義組件的時候，那么在自定義組件后，我們?nèi)绾稳M件進(jìn)行類似于常用的UI組件庫里面那些通過v-model來展示、隱藏組件的功能效果呢？好吧~接下來我直接上代碼

1.新建一個叫child.vue的vue組件文件

內(nèi)容如下：

<!--child.vue-->
<template>
    <div class="tips_wrap" v-if="showChild">
		我是自定義組件child
    </div>
</template>
<script>
export default {
    model: {
        prop: 'showChild'
    },
    props: {
        showChild: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        closeChild() {
            this.$parent.showChild= !this.$parent.showChild
            // 或者可以這樣寫,子組件用input事件傳遞值，父組件直接用v-model里面的屬性進(jìn)行接收
            this.$emit('input', false)
        }
    }
}
</script>

2.將這個組件注冊在全局

方便直接使用，也可以不注冊，在main.js文件里面引入并注冊：

// 引入自定義組件
import Child from '@/components/Child'
// 注冊自定義組件
Vue.component('Child', Child)

3.在父組件文件里面寫入Child組件

并加上v-model="showChild"：

<template>
?? ?<Child v-model="showChild"></Child>
</template>
<script>
export default {
? ? data() {
? ? ?? ?return {
?? ??? ??? ?showChild: true
?? ??? ?}
? ? }
}
</script>

好了，到此實(shí)現(xiàn)自定義組件通過v-model指令控制組件的隱藏、顯示

在組件中實(shí)現(xiàn)v-model

v-model本質(zhì)是語法糖，它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。

1.v-model使用的屬性和事件

v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件

input輸入框（type為text）、textarea元素使用value屬性和input事件
checkbox、radio使用checked屬性和change事件
select下拉框使用value屬性和change事件

2.自定義組件中輸入框的v-model

在父組件中使用自定義組件myInput，使用v-model傳入數(shù)據(jù)

<myInput v-model="name" />

以上寫法相當(dāng)于如下

<my-input :value="msg" @input="(e)=>{msg=e}"/>

v-model是value屬性和input事件的語法糖

1、第一種寫法

在組件的props中，通過value接收父組件v-model傳過來的數(shù)據(jù)。

在輸入時，通過$emit觸發(fā)input事件，并將當(dāng)前的輸入值傳過去，就會在父組件上觸發(fā)input事件，并將傳來的值賦給父組件上的值

<template>
? <div class="myInput">
? ? <input
? ? ? type="text"
? ? ? :value="value"
? ? ? @input="$emit('input', $event.target.value)"
? ? />
? </div>
</template>

<script>
export default {
? props: {
? ? value:{}
? },
};
</script>

2、第二種寫法

一般以第一種寫法就可以達(dá)到目的了。

一個組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value attribute 用于不同的目的。使用model可以改變接收的屬性名和拋出的事件名，model 選項(xiàng)可以用來避免這樣的沖突

以input（type為text）標(biāo)簽的v-model為例，使用model后：

model: {
? ? prop: "xxxxx",
? ? event: "yyyyy",
? },

就將原來要接收的value屬性改為了xxxxx屬性，
原來要拋出的input事件，改為了yyyyy事件
所以，在props中接收xxxxx屬性
觸發(fā)事件時，觸發(fā)yyyyy事件

<myInput v-model="name" />

此時就相當(dāng)于如下代碼

<my-input :xxxxx="msg" @yyyyy="(e)=>{msg=e}"/>

<template>
? <div class="myInput">
? ? <input
? ? ? type="text"
? ? ? :value="xxxxx"
? ? ? @input="$emit('yyyyy', $event.target.value)"
? ? />
? </div>
</template>

<script>
export default {
? model: {
? ? prop: "xxxxx",
? ? event: "yyyyy",
? },
? props: {
? ? xxxxx: String,
? },
};
</script>

一個組件中只能寫一個輸入框，因?yàn)関-model只能綁定一個數(shù)據(jù)；

如果想寫一個組件，在組件內(nèi)有多個輸入框，就只能傳一個對象給子組件了。

3.通過v-model控制組件的顯示

在一些組件庫中，一些組件例如dialog組件，可以通過v-model來控制dialog的顯示與隱藏，這是怎么實(shí)現(xiàn)的？

isShow控制組件box的顯示與否

<box v-model="isShow"/>

在box組件中，

通過props的value接收v-model傳過來的值；
定義一個變量showModal，并將value的值同步賦值給它；
使用showModal控制組件的顯示隱藏；
點(diǎn)擊box組件時，將showModal設(shè)為false，同時觸發(fā)input事件，并將當(dāng)前的showModal值傳過去；
父組件響應(yīng)input事件，將v-model綁定的值賦值；
div元素使用的是value屬性和input事件（div元素可以變成輸入框，它上面存在input事件）

<template>
? <div class="box" @click="hide" v-show="showModal"></div>
</template>

<script>
export default {
? props: {
? ? value: {
? ? ? type: Boolean,
? ? },
? },
? data() {
? ? return {
? ? ? showModal: false,
? ? };
? },
? watch: {
? ? value(val) {
? ? ? this.showModal = val;
? ? },
? ? showModal(val) {
? ? ? this.$emit("input", val);
? ? },
? },
? methods: {
? ? hide() {
? ? ? this.showModal = false;
? ? },
? },
};
</script>

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

您可能感興趣的文章: