Vue自定義組件v-model詳解

一、Vue自定義組件v

Vue自定義組件v-model是Vue官方推薦的一種實現雙向綁定的方式。使用v-model可以快速實現表單元素的數據雙向綁定，在組件系統中同樣適用。

<template>
  <div>
    <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
    <!-- 這裡是使用value和input事件來實現雙向綁定 -->
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    }
  }
</script>

上述代碼中，我們自定義了一個簡單的輸入框組件，使用v-model來實現數據雙向綁定，被綁定的值是value。

二、自定義時間組件Vue

下面我們來實現一個自定義的時間選擇器組件，讓我們可以使用v-model在父組件和子組件之間雙向綁定數據。

<template>
  <div>
    <input type="text" v-model="text">
    <!-- 具體的時間選擇器代碼省略 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: '',
        text: ''
      }
    },
    watch: {
      text: function(newVal) {
        this.$emit('input', newVal)
      }
    },
    mounted() {
      this.text = this.time
    }
  }
</script>

上述代碼中，我們定義了一個數據屬性time和一個輸入框text，在輸入框中的數據使用v-model來綁定到了text屬性上，同時需要監測text的變化。

在mounted鉤子函數中，我們將time的數據賦值給text，以實現父組件和子組件雙向綁定數據。如果text數據發生變化，watch監聽函數會觸發，將變化的值通過$emit(‘input’, newVal)通知父組件。

三、Vue自定義組件實現雙向綁定

除了通過watch監聽函數，Vue自定義組件還可以使用$v-model來實現雙向綁定。

<template>
  <div>
    <input type="text" :value="text" @input="$emit('update:text', $event.target.value)">
    <!-- 具體的時間選擇器代碼省略 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: '',
        text: ''
      }
    }
  }
</script>

上述代碼中，我們定義了一個輸入框text和一個數據屬性time。我們使用:value將輸入框的值綁定到了text上。在在輸入框中數據發生變化時，觸發input事件，並傳遞變化的值到父組件。

在父組件中使用v-model來綁定子組件的數據，其中text是我們自定義的子組件中的數據屬性。

四、Vue自定義組件使用過程

使用自定義組件時，在Vue中必須註冊當前組件，具體的註冊方式為：Vue.component(‘component-name’, Component)，其中component-name為組件名稱，Component是定義好的組件。

同時，在組件中定義props接受父組件的數據，常規HTML標籤的屬性可以在組件中使用props接收，例如v-model。

五、自定義組件v-model

自定義組件通過v-model來實現數據雙向綁定，需要在組件內部使用$emit來發送一個自定義事件，事件名為update:propName。

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

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    }
  }
</script>

上述代碼實現了自定義輸入框組件，使用v-model來實現數據的雙向綁定。

六、Vue2自定義組件

Vue2中的自定義組件使用方式比較簡單，只需要在定義組件時加入props屬性來接收父組件傳過來的參數即可。

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    props: {
      message: String
    }
  }
</script>

上述代碼中定義了一個簡單的組件，用於展示一條消息，由父組件通過props向子組件傳遞value。

七、Vue自定義組件屬性

在Vue中，可以通過props來定義要接收的屬性。

<template>
  <p>{{name}}，{{age}}</p>
</template>

<script>
  export default {
    props: {
      name: String,
      age: Number
    }
  }
</script>

上述代碼中，我們定義了一個接收name和age兩個屬性的組件。它將父組件傳遞的數據進行簡單的展示。

八、Vue自定義組件傳值

Vue中的自定義組件傳遞值可以通過props來實現。

在父組件中，我們可以通過v-bind指令將屬性值綁定到子組件中。

<template>
  <child-component :name="name" :age="age"></child-component>
</template>

<script>
  import ChildComponent from './ChildComponent'
  export default {
    name: 'ParentComponent',
    components: {
      ChildComponent
    },
    data() {
      return {
        name: '小明',
        age: 30
      }
    }
  }
</script>

<!-- ChildComponent.vue -->
<template>
  <p>{{name}}，{{age}}</p>
</template>

<script>
  export default {
    props: {
      name: String,
      age: Number
    }
  }
</script>

上述代碼中，我們定義了父組件ParentComponent和子組件ChildComponent。父組件中使用v-bind指令將name和age屬性綁定到子組件中。

子組件中使用props來接收父組件傳遞過來的屬性，並進行展示。

九、Vue3自定義組件

在Vue3中，雖然自定義組件的基礎語法沒有太大變化，但是通過setup來代替data、methods、computed等選項。

以下是一個簡單的Vue3自定義組件實例：

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    props: {
      message: String
    }
  })
</script>

使用defineComponent定義組件，並通過props來接收父組件傳遞的數據。

十、總結

以上就是關於Vue自定義組件v-model的詳細闡述，包括自定義組件的基本使用、自定義時間組件的實現、雙向綁定的實現方法、自定義組件的使用過程、在Vue中定義組件屬性、如何傳遞屬性值和Vue3中自定義組件的實現方法。