Vue.js Component Library Event System design process (code)

Source: Internet
Author: User
Tags emit event listener
This article brings you the content is about the Vue.js component library Event System design process (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Let's take Input-number as an example:

@ is a shorthand for the v-on instruction to bind the event listener:

<inputnumber @on-change= "Change": max= ": min=" 1 "v-model=" value1 "></InputNumber>

When we use components, we register an 自定义 event:

Methods: {Change    (v) {        Console.log (v)    }}

The way it is triggered inside a component is also simple:

Called the $emitTo trigger an event on the current instance named on-change
this. $emit (' On-change ', Val);

The idea is that if the InputNumber outer layer is nested FormItem inside a component, the invocation of the event is similar, but there is a hypothesis:

Nested relationships, may have multiple-level parent-child

Like element and iview more designed one mixins , it provides a way to:dispatch

It takes 3 a parameter:

    • ComponentName Component Name

    • EventName Custom Event Name

    • Parameters passed by the params event

Dispatch (ComponentName, eventName, params) {}

For example input-number , many of these form-embedded components will be designed and FormItem interacted with:

This.dispatch (' FormItem ', ' On-form-change ', Val);

FormItemWhen designing components, we note:

Export Default {    name: ' FormItem '}

Then register a custom event in the same way:

<form-item @on-form-change= "test" ></Form-item>

Let's take a look inside the dispatch function:

The idea is to find the parent element on one layer at a level:

    • $parent--parent instance

    • $root--Root Vue instance of the component tree

var parent = this. $parent | | this. $root;

Gets the name of the parent component:

var name = parent. $options. Name;

Start Loop judgment:

while (parent && (!name | | name!== componentname)) {    //...}

For example, the above input-number internal call dispatch, passed the parameter, is always looking for name the parent element to FormItem the

Inside the while:

Then look for its parent example and get the name

Parent = parent. $parent; if (parent) {    name = parent. $options. Name;}

In the End If you find:

Is the same as triggering a custom event at the beginning: $emit

if (parent) {parent. $emit. Apply (parent, [Eventname].concat (params));} 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.