Deep understanding of Vue modifier sync [Vue sync modifier example]

TheWorld 2021-02-23 03:57:40
deep understanding vue modifier sync


Say vue Modifier sync front , Let's take a look at the official documents first :vue .sync Modifier , Inside say vue .sync Modifiers used to exist in vue1.0 In the version , But in 2.0 Removed from .sync . But in 2.0 After the release of the actual application , We found that .sync There are still some applications , For example, when developing reusable component libraries . What we need to do is to make it easier for the code that the child component changes the state of the parent component to be distinguished . from 2.3.0 Since then, we have reintroduced .sync Modifier , But this time it just exists as a compile time syntax sugar . It will be extended to automatically update the properties of the parent component v-on Monitor . The sample code is as follows :

<comp :foo.sync="bar"></comp>
 Copy code 

Will be extended to :

<comp :foo="bar" @update:foo="val => bar = val"></comp>
 Copy code 

When subcomponents need to be updated foo The value of , It needs to explicitly trigger an update event :

this.$emit('update:foo', newValue)
 Copy code 

I can't understand it , Let's take an example ( Pop up window closing events ) To show how this code is used .

<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p> The default initial value is {{show}}, So it's shown </p>
<button @click.stop="closeDiv"> close </button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); // Trigger input event , And pass in a new value 
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
 Copy code 

Dynamic link

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 . If we don't .sync, We want to do the pop-up function above , We can props Pass the initial value , And then event monitoring , It's not complicated to implement . Here we use sync Realization , Just to give you a way of thinking , Let it understand how it works , There may be other complex functions available sync.

This is just a simple example , After reading this, I don't know if you think there is an instruction very similar to this one ,v-model? Yes , Namely v-model When used on components .

Source Author :littleTank

link :https://www.jianshu.com/p/6b062af8cf01

版权声明
本文为[TheWorld]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222181557676U.html

  1. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  2. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  3. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  4. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  5. High performance nginx HTTPS tuning
  6. JQuery advanced
  7. day 30 jQuery
  8. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  9. TCP/IP 开胃菜 之 HTTP
  10. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  11. JavaScript data type
  12. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  13. Solve Ajax cross domain problem [5 solutions]
  14. HTTP of TCP / IP appetizer
  15. Optimization of pod creation efficiency in serverless scenario
  16. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  17. First knowledge of HTTP / 1.1
  18. First knowledge of HTTP / 1.1
  19. Webpack learning notes series 05 devserver
  20. Webpack learning notes series 04 - resource processing optimization
  21. How to build a high performance front end intelligent reasoning engine
  22. How to become a professional front end engineer in 2021?
  23. How to transform single / micro service application into serverless application
  24. How to transform single / micro service application into serverless application
  25. How to transform single / micro service application into serverless application
  26. How to connect the ground gas to the micro front end?
  27. How to connect the ground gas to the micro front end?
  28. How to connect the ground gas to the micro front end?
  29. Vue server rendering principle analysis and introduction
  30. Realize the correct loading of text message
  31. Building my own project scaffolding with yeoman
  32. JavaScript advanced prototype and prototype chain
  33. React background management front end system (based on open source framework development) start
  34. JS practical skills breakpoint debugging
  35. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  36. Get page element location
  37. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  38. Delayed code execution in flutter
  39. Reconfiguration experience of KOA middleware system
  40. Add comments to your blog
  41. Svg editor -- new path
  42. Detailed explanation of debounce and throttle of JavaScript function
  43. Anti shake and throttling and corresponding react hooks package
  44. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  45. Front end, school recruitment, Taobao, guide
  46. [vue2 & G6] get started quickly
  47. Canvas from the beginning to the pig
  48. Take five minutes to standardize the code comments?
  49. Some thoughts on sass
  50. what?! You haven't filled in the award information yet
  51. How to get the interface + tsdoc needed by TS through swagger
  52. Binary tree
  53. Canvas drawing method in Web screenshot
  54. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  55. Become a big influence of technology? Coding pages quickly build personal blog
  56. Object and array deconstruction, spread operator, rest operator
  57. Analysis of Axios source code
  58. Two ways to delete useless code in project (Practical)
  59. Edit your picture with canvas
  60. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone