Vue.js using data binding component, and the parent-child value pass

Recently prepare quick refresher Vue, do a few small DEMO's review

Write todolist

Using the v-model two-way data binding, when the input inside the content changes, vue instances where inputValue also changed, will change the same way when input.value change of input

 

 To add to the list of content input array on the Add button click event bound to complete the basic todolist

 

 

Next, the assembly of the list items using Vue.component a new global components, using the component loops listing

Continued delivery of content to the parent component subassembly variable through content, while the inner component uses the variable to receive the props

 

Vue.component defined using a global component, the next component to the global partial rewrite assembly

Next, if the parent component subassembly to pass required value, i.e., a click on each item to be received within parent components and to each of the index values, which remove an acquired by the index corresponding to the clicked

 First bind a click event to the template subassembly

 

Applets and similar micro-channel, when the sub-assembly needs to delete the content corresponding to the parent transfer assembly used in the applet triggerEvent, vue use in the EMIT $

The change in the code may be used in place of @ vue the v-on, v-bind can be used, the final code is as follows:

 

Guess you like

Origin www.cnblogs.com/rmty/p/10951233.html