Vite Vue (語法糖）表單父傳子的綁定

組件間的傳遞

錯誤訊息

[plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead.

• 從父母那裡傳遞我們的數據
• 我們的孩子發出一個事件來更新父實例

父組件

v-model:表單傳遞的名稱值='表單傳遞的名稱值'

<script setup lang="ts">
    import { ref } from 'vue'
    import TodList from '../../../components/TodoList.vue'

    interface todosType{
        id: Number,
        text: String,
        completed: boolean,
    }
    const todos = ref<todosType[]>([
        {
          id: 1,
          text: 'Learn Vue.js 3',
          completed: false
        }
    ])
    const newTodo = ref<string>('')
    const createTodo = () => {
        const query = {
            id: 2,
            text: newTodo.value,
            completed: false
        }
        todos.value.push(query)
    }
</script>

<template>
<TodList 
    :todos="todos"
    v-model:newTodo='newTodo'
    @sendCreateTodo ="createTodo"
    />
</template>

子組件

:value="表單傳遞的名稱值"

@input="emitNewTodoValue"

emitNewTodoValue是函式＝>如果不是空字符，更新表單傳遞的名稱值（往父系傳遞） const emitNewTodoValue = (evt) =>{ emit('update:newTodo', evt.target.value) }

<script setup>
    const props = defineProps({
        todos: { type: Object },
        newTodo: { type: String },
        // lastNewTodoModifiers: {
        //     default: () => ({}),
        //     'no-whitespace': () => {}
        // },
    })
    const emit = defineEmits(['update:newTodo','sendCreateTodo'])
    const emitNewTodoValue = (evt) =>
    { 
    //   let val = evt.target.value
    //   if (props.lastNewTodoModifiers['no-whitespace']) {
    //     val = val.replace(/\s/g, '')
    //   }
          emit('update:newTodo', evt.target.value)
    }
  
    const sendCreateTodo = () =>{
        emit('sendCreateTodo')
    }
</script>

<template>
   <div>
    <div v-for="todo in todos" :key="todo.id" data-test="todo">
      {{ todo.text }}
    </div>
    <input
      type="text"
      placeholder="Add"
      :value="newTodo"
      @input="emitNewTodoValue"
    />
    <button @click="sendCreateTodo">新增</button>
  </div>
</template>

Vue v-model指令，值和資料屬性中的值之間建立雙向資料綁定。

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <div>
    <input v-model="value" type="text" />
    <p>Value: {{ value }}</p>
  </div>
</template>

v-model.lazy => 減少了 v-model 嘗試與 Vue 實例同步的次數 - 在某些情況下，可以顯著提高效能

v-model.number => 確保我們的值作為數字處理的一種方法是使用修飾符

v-model.trim => 在傳回值之前刪除前導或尾隨空格。

v-model.trim.lazy => 尾隨和前導空格將被刪除

參考資料
參考資料