How to use .sync modifier in vue

php中世界最好的语言
Release: 2018-06-02 14:21:31
Original
1564 people have browsed it

This time I will show you how to use the .sync modifier in vue, and what are theprecautions for using the .sync modifier in vue. The following is a practical case, let's take a look.

In some cases, we may need to perform "two-way binding" on a prop (

propertyfor parent-child components to pass data).

The functions provided by the .sync modifier in vue 1.x. When a child component changes the value of a prop with .sync, the change is also synchronized to the value bound in the parent component.

This is convenient, but can also cause problems because it breaks the one-way data flow. (Data flows from top to bottom, and events flow from bottom to top)

Since the code for changing the prop of a subcomponent is no different from the code for ordinary state changes, so when you just look at the code of the subcomponent, you It silently changes the

stateof the parent component without knowing it's appropriate.

This will bring high maintenance costs when debugging applications with complex structures. So we removed .sync in vue 2.0.

But in actual applications, we find that .sync still has its applications, such as when developing reusable component libraries. (Stupid ○△○)

All we need to do is to make the code that changes the state of the parent component in the child component easier to distinguish.

So starting from vue 2.3.0, we reintroduced the .sync modifier, but this time it only exists as a compile-time syntax sugar. It will be automatically expanded into a v-on listener that automatically updates the properties of the parent component.

For example

 就会被扩展为:  bar = val”> (@是v-on的简写)
Copy after login
When a subcomponent needs to update the value of foo, it needs to explicitly trigger an update event: this.$emit(“update:foo”, newValue);

Initial state:

State after click:

The principle is that the parent component passes a

functionto the child component:function (newValue) { this.msg = newValue; }

When using a

objectto set multiple properties at once, this .sync modifier can also be used with v-bind.

For example:

(cannot be written as :.sync="{ *********}", otherwise an error will be reported)

This example will add v-on listeners for updates to message and uC at the same time.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to search and operate JQuery elements

How to use the nodeJS module

The above is the detailed content of How to use .sync modifier in vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!