Basic Usage

• Object

Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through element as shown in the following code snippet:

<element name='comp' src='../../common/component/comp.hml'></element>
<div>
  <comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
</div>

• The name attribute indicates the custom component name (optional), which is case-insensitive and is in lowercase by default. The src attribute indicates the .hml file path (mandatory) of the custom component. If name is not set, the .hml file name is used as the component name by default.

• Event binding: Use (on|@)child1 in the custom component to bind a child component event. In the child component, use this.$emit('child1', {params:'parameter to pass'}) to trigger the bound event and pass the parameter value. In the parent component, call bindParentVmMethod and receive the parameter passed from the child component.

  NOTE: For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use @children-event instead of childrenEvent: @children-event="bindParentVmMethod".

Object