Click + to get the value of a text box

The number of how ADD TO CART time, to get selected: // Demand

// analysis found:

// 1 Button belong goodsinfo page, digital components belong numberbox

// 2 comes to the father and son nested components, so you can not get directly to the number of pages in goodsinfo selected commodities

// 3 How to solve: it involves a parent component sub-assemblies to pass value (event invocation mechanism)

// 4 nature of the event call: Father delivery method to the child, the child call this method, while the data as a parameter passed to this method.

// In goodsinfo page

In data added in return {}

selectCount: 1, // save the number of items selected by the user, the default is a

 

Add the following methods in the method:

getSelectCount (count) {// This method is to pass to the subassembly, the subassembly call 
    @ subassembly when the value of the selection is transmitted to the parent of shop assembly over, the saved values to the data. 
    this.selectCount = count; 
    the number of components to get the value of the parent // 
    console.log ( "to get the value of parent element:" + this.selectCount); 

} 
put this method call is passed to the sub-assembly, so write

<p> Quantity: 
    <infoNumber @ getCount = "getSelectCount"> </ infoNumber> 
</ the p-> 
where getCount method to be defined in the sub-assembly goodsinfo_numer in, but the first analysis: 
sub-components when the value passed to the parent component of it? 
Monitor their value with the value of the text box to change the method changge 
in goodsinfo_number.vue page

<input ID = "Test" class = "MUI-input-numbox" type = "Number" value = ". 1" 
@ Change = "countChanged" ref = "numbox" /> 

Added ref = "numbox" in input in numbox objects can be referenced by, the object acquired Dom native input, it can get the value of value 
to add in methods of method: countChanged ()

countChanged () { 
    // Every time data in a text box is changed immediately to the latest data, by calling the event is passed to the parent component 
    console.log (this. $ refs.numbox.value) // here is to numbox it's a property 
    . the this $ EMIT (. 'getCount', parseInt ($ refs.numbox.value the this)); 
}, 
note: change here is the input api itself, just like bindings, 
getCount- -> is bound in the parent component, sub-assembly through which the parseInt (this $ refs.numbox.value.) is transmitted to the parent element, parent element 
selectCount receiving a change of this value.