31 Implementation of Vue form input binding

  foreword 

This is the latest  series of articles on  the reactive object not "responsive" after a specific operation.

The main record is the related implementation mechanism of vue 

Haha To understand this article, you need the basics of using vue and js 

 test case

The test case is as follows, the use of a simple v-model 

problem debugging

Here the render corresponding to the VueComponent of HelloWorld is as follows

What you can roughly see is that a callback is added to the input box to update the counter

After updating the counter, all subsequent update processes will be cascaded 

Then here is to convert the callback in VNode.model to VNode.on

Then the callback in VNode.on will be registered in _events['input'] of VueComponent later

Then the process it uses is consistent with the process of click above 

dom -> ElInput -> VueComponent.emit -> HelloWorld.elInput.model.callback

Event handling for ElInput 

The HelloWorld.elInput.model.callback business instance test callback is processed as follows 

over

Guess you like

Origin blog.csdn.net/u011039332/article/details/129895255