맞춤형 구성요소에서 v-model을 어떻게 사용하나요? .sync 수정자는 어떤 시나리오에서 사용됩니까? 다음 문서에서는 사용자 정의 구성 요소에서 v-model을 사용하는 방법과 .sync 수정자의 사용 시나리오를 소개합니다. 도움이 되기를 바랍니다.
【관련 추천: vue.js 비디오 튜토리얼】
사용자 정의 구성 요소에서 v-model을 사용하는 방법은 무엇입니까?
답변:
코드는 다음과 같이 구현됩니다.
<input :value="value" @input="handleInput" placeholder="edit me" /> // ... props: { value: { type: String, default: '' } }, methods: { handleInput(e) { this.$emit('input', e.target.value) } } // ...
참조:
<v-base-model v-model="baseModelValue" /> // ... data() { return { baseModelValue: '' } } // ...
보시다시피 구성 요소의 v-model은 값
이라는 이름을 사용합니다. 기본적으로 code > prop 및 이벤트 이름은 input
이지만 라디오 버튼, 확인란 등과 같은 입력 컨트롤은 다른 목적 value
的 prop 和名为 input
的事件,但是像单选框、复选框等类型的输入控件可能会将 value
属性用于不同的目的。
model
选项可以用来避免这样的冲突:
自定义 prop 名和事件名,代码实现如下:
<input type="checkbox" :checked="checked" @change="handleChange" /> // ... model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, methods: { handleChange(e) { this.$emit('change', e.target.checked) } } // ...
引用的地方:
<v-base-checkbox v-model="baseCheckboxValue" /> data() { return { baseCheckboxValue: false } }
这里的 baseCheckboxValue
的值将会传入这个名为 checked
的 prop。同时当 <v-base-checkbox></v-base-checkbox>
触发一个 change
事件并附带一个新的值的时候,baseCheckboxValue
的值将会被更新。
⚠️ 注意你仍然需要在组件的
props
选项里声明checked
这个 prop。
说实话,日常开发中,我不是很喜欢直接写 v-model,不写 v-model 可以让代码更容易被理解,因为传参值和事件都一目了然嘛,而且也符合单向数据流的特点。
但是用了 v-model 确实会让代码简洁很多,有利有弊,就看取舍了。
答:父子组件交互,父组件传递给子组件 prop 值,子组件抛出事件,通知父组件改变这个绑定的值,可以用 .sync 修饰符简写。
第一次接触 .sync 修饰符,是我在使用 element-ui 的 dialog 组件时,看到visible属性上有这么一个鬼东西。
我心想,还实现了异步和同步的情况下展示弹窗吗,是不是还有个 .async 写法。
然后去看了 vue 文档,才发现自己太年轻了,还好遇到不懂的都是自己先去查一查,要是直接去问同事,会很羞耻的,hhh。
那么这个 .sync 修饰符到底是怎么用的呢?别着急,要理解 .sync 修饰符的用法,还是要从 vue 单向数据流说起。
在文章 聊聊Vue中如果不通过v-model实现双向绑定?中,我们聊到了 vue 的单向数据流。
子组件不能改变父组件传递给它的 prop 属性,推荐的做法是它抛出事件,通知父组件自行改变绑定的值。
我们通过一个计数器功能来感受 vue 的单向数据流
子组件代码:
<template> <div class="test-sync"> <button @click="add">count + 1</button> <p>我们是ti {{ count }} 冠军</p> </div> </template> <script> export default { name: 'test-sync', props: { count: { type: Number, default: 0 } }, methods: { add() { this.$emit('update:count', this.count + 1) } } } </script>
父组件代码:
<test-sync :count="count" @update:count="handleAdd" /> //... data() { return { count: 8 } } //... methods: { handleAdd(val) { this.count = val } }
可以看到,我们通过子组件抛出事件,通知父组件改变绑定的值,实现了子组件 prop 值的变更。
整个流程如下:
这样的单向数据流的写法,是 vue 一直推荐的,vue 为了方便这种写法,在 2.3.0
.
model
옵션을 사용하면 이러한 충돌을 피할 수 있습니다.
소품 이름과 이벤트 이름을 사용자 정의하세요. 코드는 다음과 같이 구현됩니다.
<test-sync :count.sync="count" /> //... data() { return { count: 8 } } //...
참조 위치:
<el-dialog :visible="dialogVisible" @close="dialogVisible = false">
여기🎜솔직히 일상적인 개발에서는 v-model을 직접 작성하는 것을 좋아하지 않습니다. v-model을 작성하지 않으면 코드를 더 쉽게 이해할 수 있습니다. 한눈에 명확하고 방향성 데이터 흐름의 단일 특성을 준수합니다. 🎜🎜그러나 v-model을 사용하면 실제로 코드가 훨씬 단순해집니다. 장단점이 있으며 모두 선택에 달려 있습니다. 🎜baseCheckboxValue code> 값은 <code>checked
라는 prop에 전달됩니다. 동시에<v-base-checkbox></v-base-checkbox>
가 새 값으로change
이벤트를 트리거하면baseCheckboxValue
값은 다음과 같습니다. 고쳐 쓰다. 🎜⚠️ 구성 요소의props
옵션에서checked
소품을 선언해야 한다는 점에 유의하세요. 🎜
<el-dialog :visible.sync="dialogVisible">🎜상위 구성 요소 코드: 🎜
this.$emit('update:visible', false);🎜🎜🎜부모 구성 요소에 알리기 위해 하위 구성 요소를 통해 이벤트를 발생시키는 것을 볼 수 있습니다. 바인딩을 변경하려면 이 값은 하위 구성 요소의 prop 값 변경을 구현합니다. 🎜🎜전체 과정은 다음과 같습니다: 🎜🎜🎜🎜 vue에서는 항상 이러한 단방향 데이터 흐름 작성 방법을 권장합니다. 이러한 작성 방법을 용이하게 하기 위해 vue는
2.3.0에 .sync 수정자의 구문 설탕을 추가했습니다.
버전. 🎜🎜.sync를 사용하여 위의 카운터 함수를 다시 작성하세요. 🎜🎜상위 구성 요소 코드: 🎜rrreee🎜훨씬 간단하지 않나요? .sync 수정자를 사용하면 더 이상 이벤트를 작성할 필요가 없습니다.🎜🎜🎜⚠️ 하위 구성 요소 내에서 이벤트를 내보낼 때 이벤트 이름은 다음과 같아야 합니다. update:count 형식으로 작성됩니다. 그렇지 않으면 .sync 기능이 적용되지 않습니다. 🎜看着名字如此高大上的功能,居然和 v-model 一样,只是一个语法糖,我了解到真相后,只能手动[捂脸哭]。
那么回到 element-ui dialog 弹窗的 visible 属性,该怎么去用 .sync 属性呢?
很显然,也只是语法糖而已,使用 .sync 修饰符的话,可以少写一点代码。
<el-dialog :visible="dialogVisible" @close="dialogVisible = false">
等价于
<el-dialog :visible.sync="dialogVisible">
⚠️ 注意,不写 .sync 修饰符的话,一定要手动地去调用 close 方法,然后把 dialogVisible 置为 false,不然即使点击关闭按钮也无法关闭弹窗。
为了验证我们的想法,直接去查看 element-ui 的源码
果然在 dialog 组件源码的 178 行中发现了我们想要的代码:
this.$emit('update:visible', false);
在之前的文章《聊聊Vue中如果不通过v-model实现双向绑定?》 中,我们聊到了 vue 的单向数据流。
这一讲,我们继续聊 v-model 和 .sync 修饰符,结果还是重点讲了 vue 的单向数据流
可见,vue 的单向数据流思想有多么重要,它几乎影响到了你日常开发中的所有组件的设计。
早年的我啥也不懂,直接上手写页面,导致测试的时候,各种 bug 层出不穷,究其根本,就是没有理解 vue 单向数据流的思想,设计的组件数据流转出了问题,还越陷越深,为了解 bug 写出更多 bug。
以后再有人问你 v-model 和 .sync 修饰符相关的问题,咱啥也不管,先把 vue 的单向数据流讲一遍。
希望我的 vue 系列文章能帮助到前端路上的你。
更多编程相关知识,请访问:编程入门!!
위 내용은 사용자 정의 구성 요소에서 v-model을 사용하는 방법은 무엇입니까? .sync 수정자의 사용 시나리오에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!