Vue3父子组件值传递(三)

本节主要介绍 Vue3 父子组件值传递中的双向数据传递方法，如何使用 v-model 。

工作原理：

也就是，父组件传值给子组件，子组件通过props进行接收，但是在子组件中需要修改改数据时，我们通过发射一个事件告诉父组件，然后父组件接收传递过来的值进行修改。其实就是父子组件之间的通信，不过， vue 做了一个简单的封装。

1.modelValue

在 Vue3 中，默认 v-model 绑定的数据在子组件读取需要使用 modelValue来接收，发射事件默认为update:modelValue

子组件示例代码：

<template>
  <div>
    <div>数据</div>
    <input type="text" v-model="modelValueCompute">
  </div>
</template>

<script>
import {defineComponent, computed} from "vue";

export default defineComponent({
  name: "SubUnit",
  props: {
    modelValue: {
      type: String
    }
  },
  emits: ['update:modelValue'],
  setup (props, context) {
    let modelValueCompute = computed({
      get: () => {
        return props.modelValue
      },
      set: (v) => {
        context.emit('update:modelValue', v)
      }
    })

    return {modelValueCompute}
  }
})
</script>

<style scoped>

</style>

父组件示例代码：

<template>
  <div>
    <div>子组件</div>
    <SubUnitModel v-model="data"></SubUnitModel>
    <div>父组件</div>
    <div>数据</div>
    <div> {{ data }} </div>
  </div>
</template>

<script>
import {ref, defineComponent} from "vue"
import SubUnitModel from "@/components/SubUnitModel"

export default defineComponent({
  name: "TransmitView",
  components: {SubUnitModel},
  setup () {
    let data = ref(null)

    return {data}
  }
})
</script>

<style scoped>

</style>

实现效果：

2.多个绑定值

当需要绑定多个值的时候，我们可以使用 v-model:属性的方式。

子组件示例代码：

<template>
  <div>
    <div>姓名</div>
    <input type="text" v-model="nameCompute">
    <div>手机号码</div>
    <input type="text" v-model="mobileCompute">
  </div>
</template>

<script>
import {defineComponent, computed} from "vue";

export default defineComponent({
  name: "SubUnit",
  props: {
    name: {
      type: String
    },
    mobile: {
      Type: String
    }
  },
  emits: ['update:name', 'update:mobile'],
  setup (props, context) {
    let nameCompute = computed({
      get: () => {
        return props.name
      },
      set: (v) => {
        context.emit('update:name', v)
      }
    })

    let mobileCompute = computed({
      get: () => {
        return props.mobile
      },
      set: (v) => {
        context.emit('update:mobile', v)
      }
    })

    return {nameCompute, mobileCompute}
  }
})
</script>

<style scoped>

</style>

父组件示例代码：

<template>
  <div>
    <div>子组件</div>
    <SubUnit v-model:name="name" v-model:mobile="mobile"></SubUnit>
    <div>父组件</div>
    <div>姓名</div>
    <div> {{ name }} </div>
    <div>手机号码</div>
    <div> {{ mobile }} </div>
  </div>
</template>

<script>
import {ref, defineComponent} from "vue"
import SubUnit from "@/components/SubUnit"

export default defineComponent({
  name: "TransmitView",
  components: {SubUnit},
  setup () {
    let name = ref(null)
    let mobile = ref(null)

    return {name, mobile}
  }
})
</script>

<style scoped>

</style>

实现效果：