examineOriginal site, more expanded content and better reading experience!
Actual Combat: Development of Common Components
Only numbers can be entered in the number input box, and there are two shortcut buttons, which can be directly reduced by 1 or increased by 1. In addition, you can also set the initial value, maximum/minimum value, and trigger a custom event to notify the parent component when the value changes.
Directory file:
-
index.html
Entry page -
input-number.js
Digital input box component -
index.js
Root instance
Firsttemplate
The root node of the component is defined in, because it is an independent componentprop
Check.
Next, it is first introduced in the parent componentinput-number
Components.
value
Is a key binding value, using thev-model
. Most form components should have onev-model
, such as input box, single selection box, multiple selection box, drop-down selector, etc.
Vue component has one-way data flow and cannot be modified directly from inside the component.prop value
The value of.
The solution is to declare adata
, default referencevalue
And then maintain this inside the componentdata
.
Vue.component('input-number', {
data() {
return {
currentValue: this.value
}
}
});
This only solves the problem of referencing the parent component during initializationvalue
However, if it is modified from the parent componentvalue
,input-number
Component ofcurrentValue
We also need to update them together.
Monitor (watch
),watch
Option is used to listen for aprop
Ordata
Change, when they change, will triggerwatch
Configured functions to complete business logic.
Passed from parent componentvalue
May not meet current conditions (greater thanmax
, or less thanmin
), so inmethods
Write a method inupdateValue
To filter out a correctcurrentValue
.
watch
The callback function of the monitored data has 2 parameters available, the first is the new value and the second is the old value.
In the callback function,this
Point to the current component instance. So you can call directlythis.updateValue()
Because Vue is actingprops
、data
、computed
Andmethods
.
MonitorcurrentValue
In the callback of,this.$emit('input',val)
In usev-model
Time changesvalue
,this.$emit('on-change',val)
Is to trigger a custom eventon-change
To inform the parent component that the value of the numeric input box has changed.
In the life cyclemounted
Also called in the hookupdateValue()
Method, because when initializing for the first time, thevalue
Filtered.
input
Data boundcurrentValue
And nativechange
Event in the handlehandleChange
Function to determine whether the current input is a time number.
< pdata-height = “365” data-theme-id = “0” data-slug-hash = “oyzbwm” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue component instance” class=”codepen”>See the PenVue component instanceby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Tab component
The main content of each tab page is controlled by the parent of the using component, which is aslot
Andslot
The number of determines the number of tab switch buttons.
File directory:
-
index.html
Entry page -
style.css
style sheet -
tabs.js
Components tabs on the Outer Layer of Tabs -
pane.js
Component pane with nested tab pages
pane
You need to control the display and hiding of the contents of the tab page, and set a.data:show
And usev-show
Commands to control elements.
getTabs
Is a common method that uses thethis.$children
To get everythingpane
Component instance.
Inmethods
There arefunction
When calling back the method of the callback, thethis
The current Vue instance is no longer executed, i.e.tabs
The assembly itself needs to be provided with an outer layer_this=this
To indirectly use the local variables of thethis
.
Traverse each onepane
After assembly, put itslabel
Andname
Extract and form aObject
And added to the datanavList
In the array.
In usev-for
Command loop displaytab
When heading, usev-bind:class
Pointed to a person namedtabCls
Themethods
To dynamically setclass
Name.
Click on eachtab
Triggered when headinghandleChange
Method to change the current selectiontab
The index of, that ispane
Component ofname
. Inwatch
Option to monitorcurrentValue
Triggered when it changesupdateStatus
Method to updatepane
The display status of the component.
Using nested components, a series of
pane
Component astabs
Component ofslot
;tabs
Components andpane
Component communication, using the$parent
And$children
Method to access parent and child chains; Definedprop:value
Anddata:currentValue
, use$emit('input')
To achievev-model
The use of.
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”vrXWQw” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-tabs” class=”codepen”>See the PenVue-tabsby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>