Preface:

I hope you are familiar with this article before reading it: value passing between parent and child components (prop and $emit).

You need to type while you read. You can directly copy my code to go through it quickly (the code is not difficult but basic), and then do it yourself.

The following code is run in scaffolding, you need to build vuecli scaffolding before copying

The Sync modifier is a very important point, and is often used when splitting pages into components. For example, if you have a vue+ element-UI management system, you must use the sync modifier when splitting the paging component into separate sub-components

For further understanding, we need two components, mydialog.vue and test.vue. Where mydialog. vue is the child component and test.vue is the parent component.

What needs to be done: The dialog box component pops up when we click the display button of the parent component. Also hide the subcomponents when we click ok or Cancel on the dialog box. The effect is to make your own Dialog component that mimics element-UI. The effect is as follows:

The basic structure is as follows (style is up to you, full code will be added at the end) :

  • MyDialog. Vue subcomponents
<template> <div> <h1>Hello</h1> <div> <button> Cancel </button> </button> <script> export default { name: 'myDialog', } </script>Copy the code
  • Test. The vue parent component
</button> <my-dialog /> </div> </template> <script> import myDialog from './myDialog' export default { name: 'test', components: { myDialog, }, } </script>Copy the code

Solution:

  • We define an isShow variable in the parent component with a default value of false and pass isShow to the dialog component. The entire dialog is shown and hidden by the parent component’s isShow
  • Click the display button of the parent component to invert isShow.
  • Then we need to change the parent component’s isShow when we click “OK” or “show” in the dialog box. Bind a click event to the dialog button, and the click emits an update event.

Add: you may want to modify it directly in the child component, but isShow passed by the parent component is much simpler. However, prop from parent to child is a one-way data flow. The data is read-only and cannot be modified. Forcing changes has no effect and the console will report errors

So the code can be modified as follows:

<! <div> <button id=" BTN "@click="isShow =! </button> <my-dialog :isShow="isShow" @update="isShow = $event" /> </div> </template> <script> import myDialog from './myDialog' export default { name: 'test', data() { return { isShow: false, } }, components: { myDialog, }, } </script> <! -- Dialog box component --> <template> <div id="test" V-show ="isShow"> <div class="box" </button> </div> </div> </template> <script> export  default { name: 'myDialog', props: { isShow: { type: Boolean, default() { return false }, }, }, methods: { }, } </script>Copy the code

About $event in the event

  • If it is a JS native event, then $event is “event object”.
  • If it is a custom event emitted by a child component using emit(), then emit() emits a custom event, then emit() emits a custom event, then event represents the argument passed by the custom event
  • So the code above can be assigned directly to the component tag:@update="isShow = $event"

In order to be more semantic and more clearly represent the data to be modified, part of the code can be modified as follows:

  • Child components

    • $emit('update: xx'); $emit('update:isShow',!); $emit('update:isShow',! this.isShow) },Copy the code

  • The parent component

    • <! <my-dialog :isShow="isShow" @update:isShow="isShow = $event" />Copy the code

  • Update :xx (u:xx); update:xx (u:xx); But!!!!! When you use the sync modifier, update: is a fixed notation, and for the sake of update: we generally think of it as a fixed notation, whether or not we use the sync modifier

Sync modifier:

The sync modifier was created to simplify the parent @update:isShow=”isShow = $event” line.

Use:

<my-dialog :isShow.sync="isShow" />
Copy the code

With the sync modifier, vue will automatically compile @update:isShow=”isShow = $event”.

Attention!!!!! The child component is written with the same identifier:this.$emit('update:isShow', ! this.isShow)

From the above analysis you can now understand why the Dialog component in Element-UI uses visible.sync=””. You can also write components similar to element-UI

<el-dialog
  :visible.sync="dialogVisible"
</el-dialog>
Copy the code

Final complete code

<! <div> <button id=" BTN "@click="isShow =! </button> <my-dialog: isshow. sync="isShow" /> </div> </template> <script> import myDialog from './myDialog' export default { name: 'test', data() { return { isShow: false, } }, components: { myDialog, }, } </script> <style> #btn { background-color: sandybrown; color: #fff; border: none; margin: 50px; height: 35px; padding: 0 20px; } </style> <! <div class="box"> <h1>Hello</h1> <div> <button </button> </div> </div> </template> <script> export  default { name: 'myDialog', props: { isShow: { type: Boolean, default() { return false }, }, }, methods: { updateShow() { this.$emit('update:isShow', ! this.isShow) }, }, } </script> <style> #test { position: absolute; z-index: 10px; Background: rgba(0, 0, 0, 0.3); top: 0; left: 0; width: 100vw; height: 100vh; } #test .box { width: 400px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 1px 1px 10px #999; background-color: #fff; } #test .box div { position: absolute; bottom: 0; right: 0; } #test .box div button { width: 80px; height: 35px; margin-right: 10px; border: none; } </style>Copy the code