十一 分分钟学会 vue3 组件传参之v-model

1. v-model 基本使用

父组件

<template>
  <div class="about">
    我是父亲组件： {{ data }}
    <!-- 使用自定义组件 -->
    <CustomComponent v-model="data"></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

import { ref } from "vue";

const data = ref('我是父组件参数')


</script>

子组件

<template>
  <div class="bb" c="dd">
      我是子组件: {{ model }}
      <div>
        <button @click="updateData">点击修改父组件的参数</button>
      </div>
  </div>
</template>

<script setup>

// 接受父组件通过 v-model 的参数
const model = defineModel()

// 修改 父组件通过 v-model 的参数
const updateData = () => {
  model.value = '我是修改后的参数'
}
</script>

<style lang="scss" scoped></style>

2. v-model 底层机制

defineModel 相当于 子组件接收了一个 名为 modelValue 的 prop， 和 一个监听此prop变化的 update:modelValue 的事件

父组件

<template>
  <div class="about">
    我是父亲组件： {{ data }}
    <!-- 使用自定义组件 -->
    <CustomComponent
      :modelValue="data"
      @update:modelValue="($event) => (data = $event)"
    ></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

import { ref } from 'vue'

const data = ref('我是父组件参数')
</script>

子组件

<template>
  <div class="bb" c="dd">
      我是子组件: {{ props.modelValue }}
      <div>
        <button @click="updateData">点击修改父组件的参数</button>
      </div>
  </div>
</template>

<script setup>

// 接受父组件通过 v-model 的参数
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 修改 父组件通过 v-model 的参数
const updateData = () => {
  emit('update:modelValue', '我是修改后的参数')
}
</script>

<style lang="scss" scoped></style>

3. v-model 自定义参数

父组件

<template>
  <div class="about">
    我是父亲组件第一个参数： {{ data1 }}
    <div>我是父亲组件第二个参数： {{ data2 }}</div>
    <!-- 使用自定义组件 -->
    <CustomComponent
    v-model:aaa="data1"
    v-model="data2"
    ></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

import { ref } from 'vue'

const data1 = ref('我是第一个父组件参数')
const data2 = ref('我是第二个父组件参数')
</script>

子组件

<template>
  <div class="bb" c="dd">
    我是子组件: 
    <div>我是第一个参数： {{ props.aaa }}</div>
    <div>我是第二个参数： {{model}}</div>
    <div>
      <button @click="updateData">点击修改父组件的参数</button>
    </div>
  </div>
</template>

<script setup>
// 接受父组件传递的第一个参数
const props = defineProps(['aaa'])

const emit = defineEmits(['update:aaa', 'update:modelValue'])


const updateData = () => {
  // 修改父组件的第一个参数
  emit('update:aaa', '第一个:我是修改后的参数')

  // 修改父组件的第二个参数
  emit('update:modelValue', '第二个:我是修改后的参数')
}

const model = defineModel({
  set(value) {
    return value + '----'
  },
  get(value) {
    return value + '0000'
  }
})



</script>

<style lang="scss" scoped></style>