van-button二次封装：

事件分类

事件分为冒泡事件和非冒泡事件

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递
非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递

使用bind绑定事件，会触发冒泡事件，使用catch绑定事件，会阻止冒泡事件。

虚拟节点

虚拟化组件节点可以带来一些重要的优势，包括：

节省资源：在传统的小程序开发中，所有的组件都会被渲染到页面上，无论是否可见。而使用虚拟化组件节点，只有处于可见状态的组件才会被创建和渲染，可以大大减少内存和CPU的占用。
提升性能：由于只有可见的组件才会被渲染，所以在页面滚动等操作过程中，只需要更新可见范围内的组件，可以大大降低渲染时间，提高页面的响应速度。
简化开发：虚拟化组件节点可以帮助开发者更好地管理和维护页面的状态，可以根据需求动态地创建和销毁节点，使页面的逻辑更加清晰和易于理解。

自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定，可以使用虚拟节点，在组件js文件中options中配置"virtualHost": true

Component({
  options:{
    "virtualHost": true,
  },

配置后，ws-button节点不存在

<van-button 
 open-type="{{openType}}"
 catch:tap="onTap"
 catch:chooseavatar="onChooseavatar"
>
 <slot />  
</van-button>

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    openType:{
      type:String,
      value:"",
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChooseavatar(event){
      this.triggerEvent("chooseavatar",event.detail)
    },
    onTap(event){
      this.triggerEvent("tap")
    },
  }
})

初识小程序-vant-button二次封装

事件分类

虚拟节点