父子元件的資料傳遞

note-img

簡介

  • 在 Vue 當中，常常會遇到要從外部元件傳遞資料到內部元件
  • 例如一些客製化表單元件，如果我們想重複使用，必須封裝成 UI 元件，再從外部傳入資料
  • 以下整理幾種常用寫法提供我自己參考

方法 1：使用 props 和 emit

一般寫法

  • 在父元件中，傳遞 props 到MyInput
  • 在子元件中，接收 props，顯示在畫面上
  • 建立emit，當 Input 內的值變動時，把更新的資料傳出到父元件
// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const msg = ref('')
const updateMsg = (newMsg: string) =. {
    msg.value = newMsg
}
</script>
<template>
  <MyInput :input-value="msg" @update-value="updateMsg" />
</template>

// MyInput.vue
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

defineProps<{
  inputValue: String
}>()

const emit = defineEmits(['update-value'])

const onInput = (event: Event) => {
  const value = (event.target as HTMLInputElement).value
  emit('update-value', value)
}
</script>

<template>
  <input type="text" :value="inputValue" @input="onInput" />
</template>

Vue3 寫法

  • 使用modelValue, update:modelValue
// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const msg = ref('')
</script>

<template>
  <MyInput :modelValue="msg" @update:modelValue="msg = $event" />
</template>
  • 自訂props的名稱，替代modelValue
<MyInput :modelValue:customMsg="msg" @update:modelValue="msg = $event" />

// MyInput.vue
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

defineProps<{
  modelValue: String
}>()

const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input
    type="text"
    :value="modelValue"
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

使用 v-model

  • 可以在父元件，直接使用 v-model 簡化程式碼
  • MyInput則維持不變
// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const msg = ref('')
</script>

<template>
  <MyInput v-model="msg" />
</template>

// MyInput.vue
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

defineProps<{
  modelValue: String
}>()

const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <input
    type="text"
    :value="modelValue"
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

方法 2： Writable computed

  • 在MyInput內新增 computed 變數 myMsg
  • 設定這個變數的 getter 和 setter
  • 和 Input 標籤使用 v-model 雙向綁定
  • 當 Input 內的值變化時，myMsg 的值跟著改變，觸發setter
  • 當setter觸發時，執行 emit，將更新的值傳出到父元件
// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const msg = ref('')
</script>

<template>
  <MyInput v-model="msg" />
</template>

// MyInput.vue
<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps<{
  modelValue: String
}>()

const emit = defineEmits(['update:modelValue'])

const myMsg = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emit('update:modelValue', newVal)
  }
})
</script>
<template>
  <input type="text" v-model="myMsg" />
</template>

方法 3：使用 VueUse 的 useVModel

  • 直接引入useVModel
  • 不用自己寫computed的getter和setter
// MyInput.vue
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'

const props = defineProps<{
  modelValue: string
}>()
const emit = defineEmits(['update:modelValue'])

const myMsg = useVModel(props, 'modelValue', emit)
</script>
<template>
  <input type="text" v-model="myMsg" />
</template>

方法 4：使用 defineModel

  • 在 Vue 3.4 中，新加入的 API（Stable）
  • 簡化了以上這些寫法

範例：傳入一個字串

// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const msg = ref('Hello world')
</script>

<template>
  <MyInput v-model="msg" />
</template>

// MyInput.vue
<script setup lang="ts">
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

範例：傳入一個物件

// 父元件
<script setup lang="ts">
import MyInput from '@/components/MyInput.vue'

const searchData = ref({
  keyword: 'Hello',
  page: 1
})
</script>

<template>
  <MyInput v-model="searchData" />
</template>

// MyInput.vue
<script setup lang="ts">
interface SearchData {
  keyword: string
  page: number
}
const model = defineModel<SearchData>()
</script>

<template>
  <input v-model="model.keyword" />
  {{ model.page }}
</template>

參考資料

# Vue # V-model # Computed