Vue3+ts 如何实现v-model父子间的通信

使用背景

在登录页面中，在父组件中给子组件(form-input)添加v-model进行数据绑定，发现这种方法根本行不通！那怎么在父组件中使用v-model与子组件进行双向绑定呢？

这行不通啊！

//子组件(form-input)
<template>
  <input type="text">密码
</template>

// 父组件
<template>
  <form-input v-model="password"></form-input>
</template>

结果是这样的：

解决方法1

子组件

<template>
<div>
  <input type="text" @input="$emit('update:test', $event.target.value)" :value="test">密码
  我是子组件,我也要值:{{ test }}
</div>
</template>

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

export default defineComponent({
  props: {
    test: String
  },
  emits: ['update:test'] // 感觉是多余的，应该是规范问题，如有错误球球纠正我
})
</script>

父组件

<template>
  <form-input v-model:test="password"></form-input>
  <div>我是父组件的v-model绑定的对象：{{password}}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import FormInput from './components/FormInput.vue'

export default defineComponent({
  name: 'App',
  components: {
    FormInput
  },
  setup () {
    const password = ref('123')
    return {
      password
    }
  }
})
</script>

结果

解决方法2

子组件

// 子组件
<template>
	<input type="text" @input="updateInput">密码
</template>

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

export default defineComponent({
  props: {
    // modelValue: String 默认的可以不写
    test: String //自定义的
  },
  setup (props, context) {
    const updateInput = (e: InputEvent) => {
      const targetVal = (e.target as HTMLInputElement).value
      // test: 'update:test' 这里我使用test 在props中设置  
      // 默认(modelValue)：update:modelValue
      context.emit('update:test', targetVal) //把targetVal的值传到父组件v-model:test绑定的对象
    }
    return {
      updateInput
    }
  }
})
</script>

父组件

// 父组件
<template>
  <form-input v-model:test="password"></form-input> //默认时v-model，自定义的记得v-model:xxx
  <div>我是父组件的v-model：{{password}}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import FormInput from './components/FormInput.vue'

export default defineComponent({
  name: 'App',
  components: {
    FormInput
  },
  setup () {
    const password = ref('')
    return {
      password
    }
  }
})
</script>

实现啦

运作流程

(自己的理解，有不对的请纠正一下哈！)
通过@input在输入时，执行updateInput函数。每次输入都会取输入框中的值然后更新targetVal的值，然后emit发出update事件，要求更新父组件中绑定的对象(也就是父组件的password啦)，要求更新的值是传过去的targetVal。