今天繼續跟大神 重新認識 Vue.js | Kuro Hsu v-model 與元件的雙向綁定 (Vue 3.x 新增) 學習學習

下列 childProp0 與 childProp1 與 childProp2 的效果一樣，都會從父元素傳資料到子元素的 props 中，並且當子元素的 props 更動時，皆會觸發使父元素的資料跟著更動

<div id="app">
    <h1>{{ parentMessage }}</h1>
    
    <!-- 沒有指定 props 名稱的 v-model 綁定 -->
    <child-input0 v-model="parentMessage"></child-input0>
    
    <!-- 指定 props 名稱為 childProp1 的 v-model 綁定 -->
    <child-input1 v-model:child-prop1="parentMessage"></child-input1>
    
    <!-- v-bind 搭配 event -->
    <child-input2 :child-prop="parentMessage" @update:child-prop="parentMessage = $event"></child-input2>
</div>

const app = Vue.createApp({
  data() {
    return {
      parentMessage: "父母與子女溝通中"
    };
  }
});


app.component("child-input0", {
  // 名稱設為 modelValue 才能接收沒有指定 props 名稱的 v-model 資料
  props: ["modelValue"],
  template: `
    // input 的值由 modelValue 決定
    <input :value="modelValue"
    
    // 當 input 事件發生時，向父元素發出訊號，訊號內容為 『嗨！資料名稱為 modelValue 的資料已經被更新囉，請利用我現在傳給你的事件值作為參數（觸發我發送這段對話的 input 事件的該 input value），去做你該做的事，因為你跟我 v-model 雙向綁定，所以你該做的事就是更新你的資料（更新你拿來跟我雙向綁定的你的資料）
  	@input="$emit('update:modelValue', $event.target.value)">
  `
});

app.component("child-input1", {
  props: ["childProp1"],
  template: `
    <input :value="childProp1"
  	@input="$emit('update:childProp1', $event.target.value)">
  `
});

app.component("child-input2", {
  props: ["childProp"],
  template: `
      <input :value="childProp" 
      @input="$emit('update:childProp', $event.target.value)">
  `
});


app.mount("#app");

今天的紀錄到這邊，如果路過的大俠有發現有什麼理解有出入的地方，希望能邦幫忙提點一波，乾蝦 (っಠ‿ಠ)っ