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

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

1.新建一個(gè)叫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.將這個(gè)組件注冊(cè)在全局

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

// 引入自定義組件
import Child from '@/components/Child'
// 注冊(cè)自定義組件
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)自定義組件通過(guò)v-model指令控制組件的隱藏、顯示 

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

v-model本質(zhì)是語(yǔ)法糖，它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(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事件的語(yǔ)法糖

1、第一種寫法

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

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

<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á)到目的了。

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

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

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

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

<myInput v-model="name" />

此時(shí)就相當(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>

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

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

3.通過(guò)v-model控制組件的顯示

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

isShow控制組件box的顯示與否

<box v-model="isShow"/>

在box組件中，

• 通過(guò)props的value接收v-model傳過(guò)來(lái)的值；
• 定義一個(gè)變量showModal，并將value的值同步賦值給它；
• 使用showModal控制組件的顯示隱藏；
• 點(diǎn)擊box組件時(shí)，將showModal設(shè)為false，同時(shí)觸發(fā)input事件，并將當(dāng)前的showModal值傳過(guò)去；
• 父組件響應(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>

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

最新評(píng)論