Control the display and hiding of components through v-model

When I used the ivew component library before, I always wondered how the modal of that component library uses v-model to control the display and hiding. In my impression, v-model is used for two-way data binding between view and modal. The official website also has information:

 

The official website has explanations for input, select and other tags, but there is no div. In general, when we customize a component, the outermost layer is a set of divs. When the control is displayed and hidden, we use v-if to control the property through the parent component. However, iview components do not pass attributes, but directly pass v-model to control, which is very interesting. What if we also want to control the display and hiding of the div through v-model ourselves? I have n’t looked at the source code of iview components, and I do n’t know how they were written, but there is a way to achieve that effect. Maybe you can try it.

Modal.vue

 1 <template>
 2   <div class="modal-container" v-if="showModal">
 3     <p>我就是一段文字而已。</p>
 4     <div class="bottom-btn">
 5       <button>确定</button>
 6       <button @click="clickCancel">取消</button>
 7     </div>
 8   </div>
 9 </template>
10 
11 <script>
12 export default {
13   props: {
14     value: {
15       default: true,
16       type: Boolean
17     }
18   },
19   watch: {
20     value(val) {
21       this.showModal = val;
22     },
23     showModal(val) {
24       this.$emit("input", val);
25     }
26   },
27   data() {
28     return {
29       showModal: false
30     };
31   },
32   methods: {
33     clickCancel() {
34       this.showModal = false;
35     }
36   },
37   mounted() {
38   }
39 };
40 </script>
41 
42 <style scoped>
43 .modal-container {
44   background: #eee;
45   width: 300px;
46   height: 240px;
47   position: absolute;
48   top: 0;
49   left: 0;
50   right: 0;
51   bottom: 0;
52   margin: auto;
53   border-radius: 10px;
54 }
55 .bottom-btn {
56   display: flex;
57   align-items: flex-end;
58   height: 70%;
59   justify-content: center;
60 }
61 .bottom-btn button {
62   outline: none;
63   border: none;
64   width: 70px;
65   height: 40px;
66   line-height: 40px;
67   text-align: center;
68 }
69 </style>

First build a Modal component, define a variable showModal to control whether the component is displayed, this component internally receives a value attribute, it is a Boolean value, mainly to judge the display hidden by this external value, but vue does not It is recommended to directly modify the data passed in by the parent component, so assign the value to showModal. A very important step is the listener here, listening to the value value and listening to the showModal inside the component. When the value is passed in externally, the value change will trigger this listener, and then the value is shown to showModal here, and showModal is bound to v-if. When the cancel button is clicked, the change of showModal will be monitored, so the input event is sent, but I feel that this input event is not sent to the parent component, but instead directly triggers the input event of the div itself, generally through $ emit to When sending an event, the parent component needs to implement the event. In this example, it is clear that the parent component has not implemented the input, but the value of the parent component has been modified. So how does it do it? In fact, seeing the explanation here combined with the official website may basically understand: " v-model essentially it is just syntactic sugar. It is responsible for listening to the user's input events to update the data , and performing some special processing on some extreme scenarios."

Because the div itself has input events, it's just used less. Set the contenteditable attribute of the div tag to true to turn the div into an input box, so it certainly has the functions and events of the input box. Therefore, the reason why there is no need for the parent component to implement the event sent by the child component is because the sent event directly triggers its own input. After the trigger, vue automatically assigns the value passed by the input event to the v-model The bound value, and then the Modal component listens to the value change to false, and assigns the value to showModal. It may seem a bit round, but it feels like this.

HelloWorld.vue:

<template>
  <div>
    <button @click="clickOpen">打开弹出框</button>
    <Modal v-model="openModal"></Modal>
  </div>
</template>

<script>
import Modal from "./Modal";
export default {
  name: "HelloWorld",
  components:{
    Modal
  },
  data() {
    return {
      openModal:false
    };
  },
  methods: {
    inputContent(val){
      console.log(val)
    },
    clickOpen(){
      this.openModal = true
    }
  }
};
</script>

In this way, you can control the hiding and displaying of the div through the v-model without using attributes. In fact, even without a v-model, it can be directly implemented, that is, through the attribute, let the subcomponents bind the v-if through the attribute, because Modal is also using v-if control intrinsically. In fact, there is no difference. I am just curious about how iview is implemented. Of course, after all, I haven't read the iview source code. It is not clear whether they did this, but this is just a way. Don't care too much. It doesn't hurt to learn more.