Hongmeng's fourth learning

1.tabs

2.list 

3. Custom components

Custom components are used by users according to business requirements , Combine existing components , Packaged into new components , You can call... Multiple times in a project , To improve the readability of the code . Custom components are created through element Introduce to the host page , How to use it is as follows  ：

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

combination if-else Examples of using custom components ：

<element name='comp1' src='../../common/component/comp1/comp1.hml'></element>
<element name='comp2' src='../../common/component/comp2/comp2.hml'></element>
<div>
  <comp1 if="{
   {showComp1}}" prop1='xxxx' @child1="bindParentVmMethodOne"></comp1>
  <comp2 else prop1='xxxx' @child1="bindParentVmMethodTwo"></comp2>
</div>

• name Property refers to the custom component name ( Not required ), Component names are case insensitive , The default is lowercase .src Properties refer to custom components hml File path ( Required ), If not set name attribute , It is used by default hml Use the file name as the component name .
• Event binding ： Binding subcomponent events in custom components use (on|@)child1 grammar , Passed in the child component this.$emit('child1', { params: ' Pass parameters ' }) Trigger the event and transfer the value , Parent component execution bindParentVmMethod Method and receive the parameters passed by the subcomponent .