异步组件

异步组件的好处是组件的资源只有在初始化的时候才会去加载。

定义一个异步组件

可以将css和js资源的引用写在模板中，资源的路径是相对于当前路径。

ui-alert-view.html

<link rel="stylesheet" href="ui-alert-view.css" scoped>
<script src="ui-alert-view.js"></script>

<div class="alert-container">
 <p>{{title}}</p>
 <p>{{content}}</p>
 <button drunk-on:click="onConfirm()">确认</button>
</div>

ui-alert-view.js

@drunk.component('ui-alert-view')
class UIAlertView extends drunk.Component {
  visible: boolean = false;
  title: string = '';
  content: string = '';

  onConfirm() {
    this.visible = false;
    this.$emit('confirm');
  }
}

ui-alert-view.css

.alert-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 100px;
  transform: translate(-50%, -50%);
  text-align: center;
}

使用异步组件

<ui-alert-view src="/path/to/ui-alert-view.html"
  title="温馨提示"
  content="{{alertContent}}"
  visible="{{alertVisible}}"
  two-way="visible">
</ui-alert-view>

src属性的值为模板的文件路径，drunk在组件上检测到这个属性时，会把这个组件当成异步组件，会先去检测是否已经加载了组件的资源，只有加载完组件资源后，才会根据组件名去初始化组件。组件的资源不会重复加载。

为了避免每次使用异步组件时都要写上src属性，我们可以使用drunk.Component.registerByResourcesLazy方法把所有的组件根据组件名和资源先进行注册:

drunk.Component.registerByResourcesLazy({
  'alert-view': '/path/to/ui-alert-view.html',
  // ...
});

然后就可以这样使用:

<ui-alert-view
  title="温馨提示"
  content="{{alertContent}}"
  visible="{{alertVisible}}"
  two-way="visible">
</ui-alert-view>

当页面需要构建这个组件时会先去加载该组件的资源，然后才会去初始化组件。