Vue自定義元件之v-model的使用

star*時光￡裔℡發表於2022-06-03
Vue元件

自定義元件之v-model的使用

v-model的語法糖可以為下面v-bind && @input聯合完成：

<input v-model="text">
<!-- 以上相當於如下寫法 -->
<input :value="text" @input="text=$event.target.value">

父子元件通訊的時候，可在父元件的孩子元件上面使用v-model，預設觸發子元件指定的event和prop接受引數

父元件:

<template>
  <div id="father">
    <p>{{ text }}</p>
    <child v-model="text"></child>
  </div>
</template>

<script>
import child from "./child.vue";
export default {
  name: "father",
  components: { child },
  data: function () {
    return {
      text: "我是父元件",
    };
  }
}
</script>

<style lang="less" scoped></style>

子元件:

<template>
  <div id="child">
    <p>{{ msg }}</p>
    <button @click="btnClick">點選改變父元件內容</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  model: {
    prop: "msg",
    event: "respond",
  },
  props: {
    msg: {
      type: String,
    },
  },
  methods: {
    btnClick() {
      this.$emit("respond", "我是子元件");
    },
  },
};
</script>

<style lang="less" scoped></style>

注意：在元件上使用v-mode時，其被使用元件上應該有個model物件配置，用於接受v-model傳遞過來的資訊，它有兩個屬性，prop是要指定傳過來的屬性接收引數，event是v-model時要指定繫結的事件名（由當前被使用元件定義）。

以上example中父元件上的 v-model 會把 msg用作 prop 且把 respond用作 event。這樣就可以實現父子元件之間的通訊，子元件可以拿到父元件傳過來的值，子元件也可以更改值。

相關文章