맞춤형 구성요소에서 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> 触发一个 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>가 새 값으로change이벤트를 트리거하면baseCheckboxValue값은 다음과 같습니다. 고쳐 쓰다. 🎜⚠️ 구성 요소의props옵션에서checked소품을 선언해야 한다는 점에 유의하세요. 🎜
🎜🎜< img src="https://img.php.cn/upload/image/242/316/248/164282217632852사용자 정의 구성 요소에서 v-model을 사용하는 방법은 무엇입니까? .sync 수정자의 사용 시나리오에 대해 이야기해 보겠습니다." title="164282217632852사용자 정의 구성 요소에서 v-model을 사용하는 방법은 무엇입니까? .sync 수정자의 사용 시나리오에 대해 이야기해 보겠습니다." alt="사용자 정의 구성 요소에서 v-model을 사용하는 방법은 무엇입니까? .sync 수정자의 사용 시나리오에 대해 이야기해 보겠습니다."/>🎜🎜생각했어요 , 비동기 및 동기 상황에서 팝업 창을 표시하는 것도 가능합니까? .async를 작성하는 다른 방법이 있습니까? 🎜🎜그러다가 vue 문서를 보고 내가 너무 어리다는 걸 깨달았습니다. 다행히도 이해하지 못하는 문제가 발생할 때마다 동료들에게 직접 물어보는 것은 매우 부끄러운 일이었습니다. . 🎜🎜그럼 이 .sync 수정자는 어떻게 사용되나요? 걱정하지 마세요. .sync 수정자의 사용법을 이해하려면 vue의 단방향 데이터 흐름부터 시작해야 합니다. 🎜🎜기사에서 Vue를 사용하지 않고 양방향성을 달성하는 방법에 대해 이야기해 보겠습니다. v-model 바인딩? 🎜에서는 Vue의 단방향 데이터 흐름에 대해 이야기했습니다. 🎜🎜🎜하위 구성 요소는 상위 구성 요소가 전달한 prop 속성을 변경할 수 없습니다. 권장되는 접근 방식은 이벤트를 발생시키고 상위 구성 요소에 자체적으로 바인딩된 값을 변경하도록 알리는 것입니다. 🎜🎜vue의 단방향 데이터 흐름을 경험하기 위해 카운터 기능을 사용합니다🎜🎜하위 구성 요소 코드: 🎜<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
