学习Vue3 第二十二章（v-model）

在Vue2和Vu3中在input绑定v-model是没有啥区别

主要是在组件上使用v-model是有变化

1.vue2组件上只能绑定一个v-model, prop是value, 通过this.$emit('input', 参数),

vue3组件上可以绑定多个v-model, prop默认值是modelValue, 多个以v-model:title传递

子组件props就是title, 通过emit("update:modalValue",xx) emit("update:titleValue",xx)

2. vue2中有个v-bind的.sync修饰符，:title.sync="title", 子组件直接通过this.$emit("update:title", xxx),vue3是移除了这个

父组件

<template>
  <!-- <input :value="name" @input="name = $event.target.value" /> -->
  <input v-model="name" />
  <div>{{ title }}</div>
  <Card v-model="name" v-model:title.isA="title" />
</template>
<script setup>
import { ref, reactive, provide } from 'vue'
import Card from './components/Card.vue'
const name = ref(0)
const title = ref('yoga')
</script>

<style scoped></style>

子组件

<template>
  <div>子组件</div>
  <div>{{ name }}</div>
  <button @click="click">修改</button>
</template>
<script setup>
import { ref, inject } from 'vue'

// 1写法
const props = defineProps({
  modelValue: String, // 默认值
  title: String,
  titleModifiers: Object, // 1. 可以获取到修饰符
})

// 2写法
const [_, titleModifiers] = defineModel('title') // 2.可以获取到修饰符
console.log(titleModifiers) // {isA: true}

const emit = defineEmits(['update:modelValue', 'update:title'])
console.log(props, 'props')

const click = () => {
  emit('update:modelValue', 333)
  emit('update:title', titleModifiers?.isA ? 'A' : '林宥嘉')
}
</script>
<style scoped lang="scss"></style>