How to use the sync modifier in vue
Editor to share with you how to use the sync modifier in vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
.sync modifier
If you have ever used Vue.js 1.x, you are no stranger to .sync. In 1.x, you can use .sync to bind data bidirectionally, that is, either the parent component or the child component can modify the data, which is bidirectional. This usage was abandoned in Vue.js 2.x in order to decouple the parent and child components as much as possible so that the child components do not inadvertently modify the state of the parent component.
However, in Vue.js 2.3.0, the .sync modifier has been added, but its usage is not exactly the same as 1.x. 2.x .sync is not a real two-way binding, but a syntactic sugar, and the modification of data is done in the parent component, not in the child component.
It is still an example of a number selector, this time using .sync instead of v-model, which can be rewritten like this:
Minus 1 {{value}} plus 1 export default {name: 'InputNumber', props: {value: {type: Number}}, methods: {increase (val) {this.$emit (' update:value', this.value + val);}
Use case:
Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}
It looks much simpler than the implementation of v-model, and the effect is the same. V-model can only have one in a component, but .sync can set many. .sync is good, but it also has limitations, such as:
Cannot be used with expressions (such as "doc.title +'!'" Is invalid)
Cannot be used on literal objects (for example, "{title: doc.title}" does not work properly).
The above is all the content of the article "how to use sync modifiers in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
