vue3使用v-model的方式传值

使用场景

vue3 子组件使用父组件的值并更改父组件的值

父组件

<template>
  /** v-model绑定到子组件的值,可以定义绑定的数据的名称,比如指定子组件接受props的值为value，也可以使用多个v-model **/
  <Search v-model='val' v-model:value="value" />
</template>

<script setup lang='ts'> // setup语法糖模式
import Search from '../search.vue' // 引入组件
import { ref } from 'vue'

const val = ref('')
const value = ref(''), // 通过v-model绑定给子组件的值
</script>

子组件

<template>
  <div>
    <span>{{ modelValue }}</span>
    <span @click="emits('update:modelValue', `${modelValue}改变了`)">改变父组件的value</span>
	/** 如果想在子组件使用v-model绑定父组件传入的value **/
	<input v-model='keyword' />
  </div>
</template>

<script setup lang='ts'> // 使用setup语法糖
import { ref } from 'vue'    

// emits
const emits = defineEmits(['update:modelValue'])

// props
interface Prop {
  modelValue: string // 如果不定义绑定的值的名称，默认为modelValue
}

defineProps<Prop>()
</script>

子组件使用v-model绑定父组件传入的值

<script setup lang='ts'> // 使用setup语法糖
import { ref, computed } from 'vue'

// emits
const emits = defineEmits(['update:modelValue'])

// props
interface Prop {
  modelValue: string // 如果不定义绑定的值的名称，默认为modelValue
  value: string // 指定值的名称为value
}

defineProps<Prop>()

const value = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:value', val) // 更新value的值
  },
})
</script>