In some cases , We may need to be on a prop ( Parent child components pass data properties ) Conduct “ Two way binding ”.

stay vue 1.x Medium .sync The function provided by the modifier . When a subcomponent changes a band .sync Of prop The value of , This change is also synchronized to the values bound in the parent component .

This is very convenient , But it can also lead to problems , Because it destroys one-way data flow .( Data flows from top to bottom , Events go from the bottom up )

Due to sub component changes prop There's no difference between the code of the standard and the code of the normal shape change , So when you just look at the code of the subcomponents , You don't know it's appropriate to quietly change the state of the parent component .

This is in debug The application of complex structure will bring high maintenance cost . So we were vue 2.0 Removed from .sync .

But in practice , We found that .sync It has its application , For example, when developing reusable component libraries .( Muddled ○△○)

All we need to do is   Code that allows child components to change the state of the parent component is easier to distinguish .

So from the vue 2.3.0 Start , We reintroduced .sync Modifier , But this time it just exists as a compile time syntax sugar . It will be automatically expanded into a   Automatically update the properties of the parent component v-on Monitor .

for example :

<child  :foo.sync=”msg”></child>   Will be extended to :  <child  :foo=”bar”  @update:foo=”val => bar = val”>   (@ yes v-on Abbreviation )

When subcomponents need to be updated foo When , He needs the display to trigger an update event :   this.$emit( “update:foo”, newValue );

The initial state :

Status after clicking :

The principle is that the parent component passes a function to the child component :function (newValue) { this.msg = newValue; }

When using an object to set multiple properties at once , This .sync Modifiers can also be associated with v-bind Use it together .

for example :  <child  v-bind.sync = “{ message: msg, uC: uc}”></child>     ( Can not write   :.sync="{*********}", Otherwise, it will be wrong )

This example will help  message  and uC  Also add... For update v-on Monitor .

I don't know why , Maybe I made a mistake , If you want to succeed, please tell me , Thank you very much ^_^

vue And .sync More about modifiers

  1. vue in .sync Modifier

    all the time , I don't understand .sync Usage of , At the end of the day, the reason is , I didn't read it carefully “.sync Modifier ”. Just right , I've been practicing in a project recently , And then used elment-ui, And then in the use of dialog When , attribute visible yes ...

  2. vue Of .sync Modifier

    A lot of times , We will be right.  prop ( Parent child components pass data properties ) Conduct “ Two way binding ” stay vue 1.x  Medium  .sync  The function provided by the modifier . When a subcomponent changes a band  .sync  Of prop The value of , This change will also ...

  3. [Vue] Components ——.sync The modifier implements to prop Conduct “ Two way binding ”

    One . Simultaneous setting 1 individual prop 1. With  update:my-prop-name  The pattern triggers the event , As for the title attribute : this.$emit('update:title', newTitle) 2. Then father ...

  4. vue in .sync Modifier , Implement the real-time update of parent component value by child component

    vue Modifier sync The function is : When a subcomponent changes a prop The value of , This change is also synchronized to the binding in the parent component . But it has a predecessor , First look at it. .sync How it was done before it came out Parent component ( Pass a value to the subcomponent :p ...

  5. Vue in .sync Modifier

    Vue in sync The role of <FatherComponent :a.sync = 'b'><FatherComponent /> Sub components emit('update:a',... ...

  6. Vue sync Use of modifiers

    Parent-child components pass values , The parent component can pass values to the child component , However, a child component cannot modify the value provided by the component , here vue Provides sync Modifier , Previous parent component click child component to display , Sub component close button , If the parent component clicks the child component again, the child component cannot be displayed . Because subcomponents click off ...

  7. 043——VUE The use of components in .sync Embellishments and computed Calculating properties to realize shopping cart principle

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue .sync Modifier

    .sync  Modifier To a prop Conduct “ Two way binding ” when , True two-way binding can cause maintenance problems , Because the child component can modify the parent component , And there is no obvious source of changes in the parent and child components . What is the principle of this modifier ? In fact, or vu ...

  9. Vue in v-model analysis 、sync Modifier parsing

    As good as water , Water is good for all things without dispute .——< Moral classics > brief introduction In normal development, some parent-child component communication is often used , Frequently used props.vuex wait , There are three other ways to record it v-model.sync How to use , Besides, yes ...

Random recommendation

  1. sqlserver Find out which table a field is in

    select [name] from [ Library name ].[dbo].sysobjects where id in(select id from [ Library name ].[dbo].syscolumns Where name ...

  2. ASP.NET List information with Excel Form derivation

    1. Find out the data and throw it in table in : private DataTable getTable() { var dbHelper = applyBLL.CreateDataBase("VISAd ...

  3. PHP object-oriented ( One )

    One . Classes and objects 1. What is a class? : class (class) It's a description of a kind of thing , Is an abstract . A conceptual definition . Is a collection of objects with some of the same properties and functional behavior . In object-oriented programming , A class should have a class name and include two main categories: attribute book name and function description ...

  4. C++: Class templates and template classes

    6.3 Class templates and template classes Class templates , It's actually creating a generic class , Its data members . The return value type and parameter type of member function are not specified , Use a virtual type to represent . When using class templates to define objects , The system replaces the virtual type in the class template with the type of the argument ...

  5. To teach you 50 Recruitment promotion ASP.NET performance ( twenty ):7 It's convenient ViewState skill

    (32)Seven handy ViewState tips Trick 32: 7 It's convenient ViewState skill Every time I have to deal with a classic ASP.N ...

  6. 【Maven actual combat 】archetype The use of and eclipse Configuration of

    1. Before the construction of the project, the folder was created manually ,maven It also gives us a parameter archetype, It can be used to build project skeleton . Use maven archetype:generate Create : ...

  7. java Of sigola orm Development of , Learning to write for the first time java, Can be used in play above

    Open source, of course :https://github.com/xiaose1205/sigola      It's useful for beginners , Experts can give some advice , Don't spray .net turn java, Some ideas don't turn that fast . I hope to get your support send ...

  8. ASP.NET Core 2.1 : 15、 ... and . Graphical routing (2.1 or earler)

    This article takes a look at the routing configuration and the request processing mechanism through a diagram .(ASP.NET Core Series catalog ) One . summary Routing has two main functions : Will request URL Matches the defined route , To find the URL The corresponding handler and pass in the ...

  9. CentOs Set static IP

    1. Modify network card configuration edit :vi /etc/sysconfig/network-scripts/ifcfg-eno49 adopt ifconfig command , Check the network card in use ( In particular, network card alias ). You can also enter /etc/sy ...

  10. JavaScript function overloading

    Translator press : jQuery The father of John Resig Clever use of closures , Realized JavaScript function overloading . original text : JavaScript Method Overloading translator : Fundebug in order to ...