标签：浅谈 title 修饰符 sync value prop 组件 model
很多同学对 Vue 的第一印象就是“响应式”、“双向绑定”等特性，而 v-model 就是实现双向绑定的语法糖，用过 Vue 的小伙伴一定都非常熟悉。但是在 Vue3 中，v-model 发生了一些改动，使得它不再兼容 Vue2 的用法，具体是什么呢，我们一起来看看。
非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
- prop：
value->modelValue； - 事件：
input->update:modelValue；
非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；
新增：现在可以在同一个组件上使用多个 v-model 绑定；
新增：现在可以自定义 v-model 修饰符。
2.x 语法
在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
这里
v-model实际上就是为表单元素定制的，input事件和valueprop 都是强耦合的
如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：
<!-- ParentComponent.vue -->
<ChildComponent v-model="pageTitle" />
// ChildComponent.vue
export default {
model: {
prop: 'title',
event: 'change'
},
props: {
// 这将允许 `value` 属性用于其他用途
value: String,
// 使用 `title` 代替 `value` 作为 model 的 prop
title: {
type: String,
default: 'Default title'
}
}
}
所以，在这个例子中 v-model 是以下的简写：
<ChildComponent :title="pageTitle" @change="pageTitle = $event" />
某些情况下，我们可能需要对某个 prop 进行“双向绑定”，例如一个弹框组件的显示隐藏，既可以从组件外面进行控制，也可以从组件内部去控制。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：
this.$emit('update:title', newValue)
然后父组件可以在需要时监听该事件，并更新本地的 data property。例如：
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：
<ChildComponent :title.sync="pageTitle" />
.sync实际上就是上面的语法糖，可以看到其实和v-model用法非常相似
3.x 语法
在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：
<ChildComponent v-model="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代：
<ChildComponent v-model:title="pageTitle" />
<!-- 是以下的简写: -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
<!-- 是以下的简写： -->
<ChildComponent
:title="pageTitle"
@update:title="pageTitle = $event"
:content="pageContent"
@update:content="pageContent = $event"
/>
题外话
在 React 中如何实现类似功能？通过将修改状态的代码包裹在函数中，作为 prop 传递给子组件，子组件调用之后，闭包的引用发生变化，导致父组件状态被修改，进而改变传入子组件的 prop 的值：
const Parent = () => {
const [count, setCount] = React.useState(0);
const plusOne = () => setCount(count + 1);
return (
<Child count={count} onClick={plusOne} />
)
}
const Child = ({ count, onClick }) => {
return (
<>
<span>{count}</span>
<button onClick={onClick}>点我</button>
</>
)
}
参考
标签：浅谈,title,修饰符,sync,value,prop,组件,model 来源： https://blog.csdn.net/weixin_43487782/article/details/121758788
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。