# 元件直接加入 v-model
## 將元件內的值傳回 v-model（update:modelValue）
<p>參考說明：<a href="https://vue3js.cn/docs/zh/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0">https://vue3js.cn/docs/zh/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0</a></p>
我們在元件中做屬性綁定 v-mode屬性、text為元件資料 - 前內、後外口訣
```htmlembedded=
{{ name }}
<custom-input v-model:text="name"></custom-input>
```
外層元件架構
```javascript=
const app = Vue.createApp({
data() {
return {
name: '小明',
text: '這是文字片段 1',
text2: '這是文字片段 2'
}
}
})
```
內層元件屬性綁定的方式
1. :value="text"、綁定 props: ['text']
2. 使用 @input "$emit('update:text', $event.target.value)" 回傳值到v-model:text 做雙向綁定
```javascript=
// $emit('update:text', $event.target.value) 搭配 props，可以將更新後的值寫回 v-model 內
app.component('custom-input', {
props: ['text'],
template: `<input type="text"
:value="text"
@input="$emit('update:text', $event.target.value)"
class="form-control">`
});
```
## ==同個元件加入 多個 v-model==
一樣的方式可以綁定多個model、加入 v-model:t1="text" ， v-model:t2="text2
```htmlembedded=
{{ text }} {{ text2 }}
<custom-input2
v-model:t1="text"
v-model:t2="text2"
></custom-input2>
```
外層元件架構
```javascript=
const app = Vue.createApp({
data() {
return {
text: '這是文字片段 1',
text2: '這是文字片段 2'
}
}
});
```
內層元件架構 加入流程-
1. 綁定 :value="t1" 、 :value="t2"。
2. 加入 @input="$emit('update:t1', $event.target.value)"。
3. 這樣雙向綁定內層元件資料就完成。
```javascript=
app.component('custom-input2', {
props: ['t1', 't2'],
template: `
<input type="text"
:value="t1"
@input="$emit('update:t1', $event.target.value)"
class="form-control">
<input type="text"
:value="t2"
@input="$emit('update:t2', $event.target.value)"
class="form-control">
`
})
```
{"metaMigratedAt":"2023-06-16T10:53:21.493Z","metaMigratedFrom":"YAML","title":"元件直接加入 v-model","breaks":true,"contributors":"[{\"id\":\"c05b36ac-d774-4e45-8fc3-5e50c9be5123\",\"add\":1782,\"del\":29}]"}