Vue3---父子组件双向数据绑定v-model

你的名字 2023-01-19 09:40 22阅读 0赞

**    Vue3父子组件双向数据绑定写法做了些许改变，同时也支持多个数据双向绑定。[官方API][API]**

*  **单个数据双向绑定**
 *  **子组件**

<template>
      <div>
        <input v-model="sea" @input="valChange(sea)" />
      </div>
    </template>
    <script lang="ts">
    import { defineComponent, ref, watch } from 'vue'
     
    export default defineComponent({
      name: 'ChildComp',
      props: {
        modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
          type: String,
          default: ''
        }
      },
      setup (props, { emit }) {
        // input初始化
        const sea = ref(props.modelValue)
      
        // 如果父组件传过来的数据是异步获取的，则需要进行监听
        watch(() => props.modelValue, () => { sea.value = props.modelValue })
    
        // 数据双向绑定
        function valChange (e: string) {
          emit('update:modelValue', e)
        }
     
        return {
          sea,
          valChange
        }
      }
    })
    </script>

*  **父组件**

<template>
      <div>
        
        <ChildComp v-model="search" />
        <h1>{
       { search }}</h1>
      </div>
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    import ChildComp from '../components/ChildComp'
    
    export default defineComponent({
      name: 'Index',
      components: {
        ChildComp
      },
      setup () {
        const search = ref('')
        return {
          search
        }
      }
    })
    </script>

![20210509153945769.png][]

*  **多个数据双向绑定**
 *  **子组件**

<template>
      <div>
        <input v-model="sea" @input="valChange(sea)" />
        <input v-model="add" @input="valChange2(add)" />
      </div>
    </template>
    <script lang="ts">
    import { defineComponent, ref, watch } from 'vue'
    
    export default defineComponent({
      name: 'ChildComp',
      props: {
        modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
          type: String,
          default: ''
        },
        address: {
          type: String,
          default: ''
        }
      },
      setup (props, { emit }) {
        // input初始化
        const sea = ref(props.modelValue)
        const add = ref(props.address)
    
        // 如果父组件传过来的数据是异步获取的，需要进行监听
        watch(() => props.modelValue, () => { sea.value = props.modelValue })
        watch(() => props.address, () => { add.value = props.address })
    
        // 数据双向绑定
        function valChange (e: string) {
          emit('update:modelValue', e)
        }
    
        // 数据双向绑定
        function valChange2 (e: string) {
          emit('update:address', e)
        }
    
        return {
          sea,
          add,
          valChange,
          valChange2
        }
      }
    })
    </script>

*  **父组件**

<template>
      <div>
        <ChildComp v-model="search" v-model:address="addr" />
        <h1>{
       { search }}</h1>
        <h1>{
       { addr }}</h1>
      </div>
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    import ChildComp from '../components/ChildComp'
    
    export default defineComponent({
      name: 'Index',
      components: {
        ChildComp
      },
      setup () {
        const search = ref('')
        const addr = ref('')
        return {
          search,
          addr
        }
      }
    })
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

[API]: https://vue3js.cn/docs/zh/guide/migration/v-model.html#%E6%A6%82%E8%A7%88
[20210509153945769.png]: /images/20221021/2d8840655d0e4d99a3ca990bde24b922.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20221021/4f3e34ccb2324d019f54c9916c7b486a.png