Vue는 양방향 바인딩을 구현합니다. 1. v-model 명령을 사용하여 바인딩을 구현합니다. 사용자 정의 구성 요소의 v-model은 modelValue prop을 전달하고 throw된 update:modelValue 이벤트를 수신하는 것과 동일합니다. better-sync 플러그인은 바인딩을 구현합니다. 3. v-bind.sync 수정자를 사용합니다. 구문은 "
"입니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
<childcomponent></childcomponent> <!-- 是以下的简写: --> <childcomponent></childcomponent>
프로퍼티나 이벤트 이름을 다른 이름으로 변경하려면 model 옵션: <code>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" />
在 Vue 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop
并接收抛出的 update:modelValue
事件:
<ChildComponent v-model="pageTitle" /> <!-- 是以下的简写: --> <ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event" />
Vue3
可以绑定多个v-model
, 例如:<ChildComponent v-model:title="pageTitle" v-model:name="pageName" />
有需求如此:开发一个 Prompt 组件,要求同步用户的输入,点击按钮可关闭弹窗。
一般我们会这样做:
<template> <div v-show="_visible"> <div>完善个人信息</div> <div> <div>尊姓大名?</div> <input v-model="_answer" /> </div> <div> <button @click="_visible = !_visible">确认</button> <button @click="_visible = !_visible">取消</button> </div> </div> </template> <script> export default { name: 'prompt', props: { answer: String, visible: Boolean }, computed: { _answer: { get() { return this.answer }, set(value) { this.$emit('input', value) } }, _visible: { get() { return this.visible }, set(value) { this.$emit('update:visible', value) } } } } </script>
写一两个组件还好,组件规模一旦扩大,写双向绑定真能写出毛病来。于是,为了解放生产力,有了 vue-better-sync 这个轮子,且看用它如何改造我们的 Prompt 组件:
<template> <div v-show="actualVisible"> <div>完善个人信息</div> <div> <div>尊姓大名?</div> <input v-model="actualAnswer" /> </div> <div> <button @click="syncVisible(!actualVisible)">确认</button> <button @click="syncVisible(!actualVisible)">取消</button> </div> </div> </template> <script> import VueBetterSync from 'vue-better-sync' export default { name: 'prompt', mixins: [ VueBetterSync({ prop: 'answer', // 设置 v-model 的 prop event: 'input' // 设置 v-model 的 event }) ], props: { answer: String, visible: { type: Boolean, sync: true // visible 属性可用 .sync 双向绑定 } } } </script>
vue-better-sync 统一了 v-model 和 .sync 传递数据的方式,你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。
GitHub:fjc0k/vue-better-sync
在某些情况下,我们可能需要对某一个 prop
进行“双向绑定”(除了前面用 v-model 绑定 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" />
rrreeevue3 移除
따라서 이 예에서 v-model은 다음의 약어입니다..sync
rrreeerrreee
Vue 3.x에서 사용자 정의 구성 요소의 v-model은 를 전달하는 것과 같습니다. modelValue prop
을 실행하고 발생한 update:modelValue
이벤트를 수신합니다. rrreee
Vue3
는 여러 v-model
을 바인딩할 수 있습니다. 예를 들어 : <childcomponent v-model:title="pageTitle" v-model:name="pageName"></childcomponent>
🎜🎜prop
를 "양방향 바인딩"해야 할 수도 있습니다(v-bind를 사용한 이전 바인딩에 추가). model prop)을 결정하는 경우. 이를 위해 update:myPropName
throw 이벤트를 사용하는 것이 좋습니다. 예를 들어 이전 예에서 제목 prop이 있는 ChildComponent의 경우 다음과 같이 부모에 새 값을 할당하려는 의도를 전달할 수 있습니다. 🎜rrreee🎜부모는 이벤트를 수신하고 필요한 경우 로컬 데이터 속성을 업데이트할 수 있습니다. 예: 🎜rrreee🎜 편의상 .sync 수정자를 사용하여 다음과 같이 축약할 수 있습니다. 🎜rrreee🎜🎜vue3 .sync
제거🎜🎜🎜[관련 권장 사항: 🎜vuejs 비디오 튜토리얼 🎜、 🎜웹 프론트엔드 개발🎜】🎜위 내용은 Vue에서 양방향 바인딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!