前言:
而今小伙伴们对“sync修饰符”大约比较重视,你们都想要学习一些“sync修饰符”的相关文章。那么小编也在网上搜集了一些对于“sync修饰符””的相关知识,希望各位老铁们能喜欢,我们一起来了解一下吧!场景:
父组件给子组件传递属性值, 在子组件内部会对传递的属性值进行修改,子组件修改之后,把修改后的值传递给父组件
//子组件<template> <div class="children"> <el-button @click="add">加1</el-button> </div></template><script> export default { props: { inputValue: { required: true, type: Number, }, }, data() { return{ value:0 } }, created() { this.initValue(); }, methods: { initValue(){ this.value = this.inputValue }, add() { this.value ++; this.$emit("update:inputValue", this.value); } }, }</script>
//父组件<template> <div class="parent"> <children :inputValue.sync="currentValue"></children> </div></template><script> export default { data() { return{ currentValue:0 } }, }</script>
关键点:
子组件通过this.$emit("update:inputValue", this.value);进行属性传值修改父组件引用子组件时使用.sync修饰符修饰属性
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。