Development of Vue Common Components

  Front end, Front end frame, javascript, vue.js

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.htmlEntry page
  • input-number.jsDigital input box component
  • index.jsRoot instance

FirsttemplateThe root node of the component is defined in, because it is an independent componentpropCheck.

Next, it is first introduced in the parent componentinput-numberComponents.

valueIs 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 valueThe value of.

The solution is to declare adata, default referencevalueAnd 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 initializationvalueHowever, if it is modified from the parent componentvalue,input-numberComponent ofcurrentValueWe also need to update them together.

Monitor (watch），watchOption is used to listen for apropOrdataChange, when they change, will triggerwatchConfigured functions to complete business logic.

Passed from parent componentvalueMay not meet current conditions (greater thanmax, or less thanmin), so inmethodsWrite a method inupdateValueTo filter out a correctcurrentValue.

watchThe 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,thisPoint to the current component instance. So you can call directlythis.updateValue()Because Vue is actingprops、data、computedAndmethods.

MonitorcurrentValueIn the callback of,this.$emit('input',val)In usev-modelTime changesvalue,this.$emit('on-change',val)Is to trigger a custom eventon-changeTo inform the parent component that the value of the numeric input box has changed.

In the life cyclemountedAlso called in the hookupdateValue()Method, because when initializing for the first time, thevalueFiltered.

inputData boundcurrentValueAnd nativechangeEvent in the handlehandleChangeFunction 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 aslotAndslotThe number of determines the number of tab switch buttons.

File directory:

  • index.htmlEntry page
  • style.cssstyle sheet
  • tabs.jsComponents tabs on the Outer Layer of Tabs
  • pane.jsComponent pane with nested tab pages

paneYou need to control the display and hiding of the contents of the tab page, and set a.data:showAnd usev-showCommands to control elements.

getTabsIs a common method that uses thethis.$childrenTo get everythingpaneComponent instance.

InmethodsThere arefunctionWhen calling back the method of the callback, thethisThe current Vue instance is no longer executed, i.e.tabsThe assembly itself needs to be provided with an outer layer_this=thisTo indirectly use the local variables of thethis.

Traverse each onepaneAfter assembly, put itslabelAndnameExtract and form aObjectAnd added to the datanavListIn the array.

In usev-forCommand loop displaytabWhen heading, usev-bind:classPointed to a person namedtabClsThemethodsTo dynamically setclassName.

Click on eachtabTriggered when headinghandleChangeMethod to change the current selectiontabThe index of, that ispaneComponent ofname. InwatchOption to monitorcurrentValueTriggered when it changesupdateStatusMethod to updatepaneThe display status of the component.

Using nested components, a series ofpaneComponent astabsComponent ofslot;tabsComponents andpaneComponent communication, using the$parentAnd$childrenMethod to access parent and child chains; Definedprop:valueAnddata:currentValue, use$emit('input')To achievev-modelThe 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>

Related Posts: