vue3 父子组件v-model传值

### 回答1：
在Vue3中，父子组件间v-model传值的方式和Vue2相比有所改变，可通过在子组件中使用“emit”自定义一个名为“update:modelValue”的事件，然后在父组件中使用v-model来绑定这个事件的参数值即可。如下所示：

子组件代码：

<template>
  <div>
    <input type="text" :value="modelValue" @input="handleInput">
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  methods: {
    handleInput(e) {
      this.$emit('update:modelValue', e.target.value)
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <ChildComponent v-model="name"></ChildComponent>
    <p>{{ name }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

父组件中使用v-model绑定的“name”变量会作为子组件emit的参数，实现父子组件间的数据双向绑定。

### 回答2：
vue3中，父子组件如何传递数据一直都是热门问题之一，尤其是在使用v-model时，如何正确传递数据就更为重要。在vue3中，父子组件通过v-model传递数据的方式有所变化，下面将详细阐述vue3父子组件v-model传值的方式。

1、子组件使用v-bind绑定value属性：

子组件实现v-model的关键是将输入框的值value属性绑定到子组件实例的一个属性上，同时监听输入框的输入事件，实时更新该属性。

代码如下：

<template>
  <input :value="val" @input="updateVal">
</template>

<script>
export default {
  props: {
    value: String
  },
  setup(props, { emit }) {
    const val = Vue.ref(props.value)
    const updateVal = (e) => {
      val.value = e.target.value
      emit('update:value', val.value)
    }
    Vue.watch(() => props.value, (val) => {
      val.value = val
    })
    return {
      val,
      updateVal
    }
  }
}
</script>

上述代码中，我们通过setup方法来定义子组件的逻辑部分，通过props参数接收父组件传递的value值；然后定义一个ref类型的val属性，用来存储输入框的值，并且通过watch监听value值的变化，当父组件传递的value值变化时，同步更新val值。

接着，我们通过updateVal方法来实时更新val值，并通过emit方法触发update事件，将子组件更新后的值传递给父组件。

2、父组件使用v-model绑定子组件：

在父组件中，我们可以使用v-model来绑定子组件，并传递数据。

代码如下：

<template>
  <Child v-model="msg"></Child>
</template>

<script>
import Child from './child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      msg: 'hello'
    }
  }
}
</script>

在上述代码中，我们引入了子组件Child，并通过v-model绑定msg属性，这样就完成了父子组件的数据双向绑定。

需要注意的是，父组件中通过v-model绑定的属性名应该与子组件中接收的属性名一致，例如上述代码中，Child组件中接收的属性名为value，那么在父组件中绑定时也应该使用value。

以上便是vue3中父子组件v-model传值的方式，通过以上的实现，我们即可实现数据双向绑定。同时，需要注意代码的规范性，遵循vue3的开发规范，可提高代码的可读性和可维护性。

### 回答3：
Vue3中的父子组件v-model传值是一种方便且实用的传值方式。V-model指令是一种语法糖，它将组件的props和自定义事件结合在一起，可以让父组件很方便地管理一个子组件的状态，并将子组件的值传递回来。

父组件可以使用v-model指令来管理子组件的值，格式为v-model="propName"，其中propName是子组件中接收父组件值的prop属性名。在子组件中，我们需要使用$emit方法来触发一个自定义事件，将子组件值传递给父组件。自定义事件的名称应该和prop属性名称以及“update:”一起拼接成一个字符串，如“update:propName”。

下面是一个简单的实例：

在父组件中，我们定义一个名为“parentValue”的数据，通过父子组件传值的方式将这个数据传递给子组件：

<template>
  <div>
    <p>父组件值：{{ parentValue }}</p>
    <child-component v-model="parentValue"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      parentValue: ''
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中，我们定义一个名为“value”的prop属性接收父组件传过来的值，并在输入框中使用v-model指令绑定该值。当输入框的值发生变化时，我们通过$emit方法触发一个自定义事件“update:value”，将最新的值传递给父组件：

<template>
  <div>
    <p>子组件值：{{ value }}</p>
    <input type="text" v-model="value">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit('update:value', newValue);
    }
  },
  watch: {
    value(newValue) {
      this.updateValue(newValue);
    }
  }
}
</script>

需要注意的是，子组件中使用watch监控value值的变化，并在变化时触发updateValue方法，因为在输入框中使用v-model指令绑定的是子组件中的值，无法直接触发父组件的更新。

最后，父组件的parentValue值将会通过v-model指令传递给子组件，并且子组件的更新值会通过自定义事件“update:value”传递回父组件，完成了父子组件v-model传值的双向数据绑定。