# 元件直接加入v-model (5-4)
###### tags: `Vue`、`5. 進階Api`
2022.3.7

　　  讓元件輸入資料也能和外部資料雙向綁定。

### 範例1：簡單雙向綁定（一個輸入框）

<元件 v-model:傳遞變數在元件中名稱="外部變數名稱"></元件>

props=['傳遞變數在元件中名稱'],
template:`<input :value="傳遞變數在元件中名稱" @input="$emit('update:傳遞變數在元件中名稱',$even.target.value)">`

---

<div id="app" >
       {{ text }}<br>
       <oldmoon v-model:text="text"></oldmoon>
</div>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    text:'輸入的文字'
                }
            }
        });

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

        app.mount('#app');
</script>

### 範例2：多重雙向綁定（多個輸入框）

<div id="app" >
       {{ text1 }}<br>
       {{ text2 }}<br>
       <oldmoon v-model:text1="text1" v-model:text2="text2"></oldmoon>

</div>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    text1:'輸入的文字1',
                    text2:'輸入的文字2'
                }
            }
        });

        app.component('oldmoon',{
            props:['text1','text2'],
            template:`<input :value="text1" @input="$emit('update:text1', $event.target.value)"><br>
                      <input :value="text2" @input="$emit('update:text2', $event.target.value)">`
        });

        app.mount('#app');
</script>