vue3组件绑定多个v-model

vue3.0可以绑定多个属性值了，传参如下：

<template lang="">
  <p>组件支持多个vModel绑定</p>
  <div>
    {{name}}
    {{title}}
    <!-- 传入多个参数，并修改 -->
    <Input v-model:title="title" v-model:name="name"/>
  </div>
</template>
<script>
  import Input from '../components/Input.vue'
  import { reactive, toRefs } from 'vue'
  export default {
    components: {
      Input
    },
    setup(props) {
      const data = reactive({
        name: 'joahyan',
        title: 'learn Vue3'
      })
      return {
        ...toRefs(data)
      }
    }
  }
</script>
<style lang="">

</style>

组件代码

<template lang="">
  <div>
    <el-input @change="setName" v-model="name">
    </el-input>
    <el-input @change="setTitle" v-model="title">
    </el-input>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'Input',
    props: {
      name: {
        default: () => 'joahyan'
      },
      title: {
        default: () => 'learn Vue3.0'
      }
    },
    setup(props) {
    },
    methods: {
      setName(e) {
        this.$emit("update:name", e)
      },
      setTitle(e) {
        this.$emit("update:title", e)
      }
    },
  }
</script>
<style lang="">

</style>