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

Posted on by

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

在開發項目的過程中，我們通常會有自定義組件的時候，那麼在自定義組件後，我們如何去對組件進行類似於常用的UI組件庫裡面那些通過v-model來展示、隱藏組件的功能效果呢？好吧~接下來我直接上代碼

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

內容如下：

<!--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裡面的屬性進行接收
            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>

好瞭，到此實現自定義組件通過v-model指令控制組件的隱藏、顯示 

在組件中實現v-model

v-model本質是語法糖，它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

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

v-model在內部為不同的輸入元素使用不同的屬性並拋出不同的事件

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

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

在父組件中使用自定義組件myInput，使用v-model傳入數據

<myInput v-model="name" />

以上寫法相當於如下

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

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

1、第一種寫法

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

在輸入時，通過$emit觸發input事件，並將當前的輸入值傳過去，就會在父組件上觸發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、第二種寫法

一般以第一種寫法就可以達到目的瞭。

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

以input（type為text）標簽的v-model為例，使用model後：

model: {
    prop: "xxxxx",
    event: "yyyyy",
  },
  • 就將原來要接收的value屬性改為瞭xxxxx屬性，
  • 原來要拋出的input事件，改為瞭yyyyy事件
  • 所以，在props中接收xxxxx屬性
  • 觸發事件時，觸發yyyyy事件
<myInput v-model="name" />

此時就相當於如下代碼

<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>

一個組件中隻能寫一個輸入框，因為v-model隻能綁定一個數據；

如果想寫一個組件，在組件內有多個輸入框，就隻能傳一個對象給子組件瞭。

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

在一些組件庫中，一些組件例如dialog組件，可以通過v-model來控制dialog的顯示與隱藏，這是怎麼實現的？

isShow控制組件box的顯示與否

<box v-model="isShow"/>

在box組件中，

  • 通過props的value接收v-model傳過來的值；
  • 定義一個變量showModal，並將value的值同步賦值給它；
  • 使用showModal控制組件的顯示隱藏；
  • 點擊box組件時，將showModal設為false，同時觸發input事件，並將當前的showModal值傳過去；
  • 父組件響應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>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：