Vue3.x-v-model的深层理解

1.先来复习一下父子组件的通信

父传子-props

注意：props不仅可以向下面案例中用数组的形式，也可以用对象来做校验类型
官网的案例：

Vue.component('my-component', {   
props: {     // 基础的类型检查 (`null` 匹配任何类型)   
	propA: Number,     // 多个可能的类型     
	propB: [String, Number],     // 必填的字符串     
	propC: {       type: String,       required: true     },     // 带有默认值的数字     
	propD: {       type: Number,       default: 100     },     // 带有默认值的对象     
	propE: {       type: Object,       // 对象或数组默认值必须从一个工厂函数获取       
	default: function () {         return { message: 'hello' }       }     },     // 自定义验证函数     
	propF: {       validator: function (value) {         // 这个值必须匹配下列字符串中的一个         
	return ['success', 'warning', 'danger'].indexOf(value) !== -1       }     }   
} })

我的示例：

//父
<k-input :msg="msg"></k-input>

//子组件中引入msg
props: { 
msg: { 
type: String,
default: ' '
}
},

子传父-$emit('func','传递的参数')

1. 子传父就是子组件控制父组件方法，让父组件变相改变自己data
2. 需要在子组件methods，某个方法中使用$emit('func','传递的参数') 来控制

示例：

<!--子组件用来传递父组件的方法(这是在父组件中使用 注意‘fun’)--> 
<my-Com2 @fun="myChange"></my-Com2>

<!--这是在子组件的某个方法中使用--> 
this.$emit('fun','我是传值')

使用 – sync语法糖 --这在vue3.x中会不一样

以我的理解就是将父子组件data 都绑定在一起，改变子组件就是改变了父组件

//等号左面的属于子组件的右面属于父组件
<my-Com2 v-bind:parent-Count.sync = 'count'></my-Com2>

在子组件中🔻

// 父传子        
props:['parentCount'],
//在methods中的某个事件方法中这样写
this.$emit('update:parentCount',1000)

2.进入正题 vue3.x中v-model的使用()❗

首先了解vue2.x中v-model的用法

‘v-model’ 是语法糖，因此在组件上使用也是同样的，在组件父子值传递往往需要在使用的时候定义事件和 props

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
可以简写 
<ChildComponent v-model="pageTitle" />

v-model在vue2.x的弊端：
v-model只能在组件使用一次，并且如果想实现类似效果使用多次需要.sync来定义使用这个语法糖
例如:

//这样是不行的❌
<ChildComponent v-model="message" :title="message" />
//咱们要这样 在后面加.sync
<ChildComponent v-model="message" :title.sync="message" />

下面看vue3.x的用法示例

在vue3.x将.sync移除,为了让组件可以使用多个v-model也从原来value和input变成了modelValue和update:modelValue

<ChildComponent v-model="message" />
可以简写         
<custom-input  :modelValue="message"  @update:modelValue="message= $event"  />

具体代码示例：


效果：