---
# System prepended metadata

title: 元件直接加入 v-model
tags: [Vue-六角課程]

---

---
tags : Vue-六角課程
---

# 元件直接加入 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">
`
})
```


