组件

组件书写

组件主要由一个对象收集模板、数据和逻辑，如下面列出的，这样使组件更加清晰

以下带星号的都是必须的

• name：组件名 *
• template：模板 *
• data：组件内部属性
• props：来自父组件的数据
• computed：组件计算属性
• methods：组件方法及钩子函数
• watch：组件内部观察属性变化
• filters：组件自定义过滤器（avalon的过滤器是全局的，所以最好命名唯一）
• events：组件对外分发事件的声明
• components：组件依赖的子组件
• beforeCreate：组件创建vm前会调用，可用于vm数据校验或补充
• afterCreate：组件创建vm后会调用，可马上操作组件vm

注：当然也可以按avalon组件那样书写，上面收集的最终都会转换为avalon组件的形式

组件使用

对avalon扩展了registerComponent方法，该方法接收上面的Object参数，在使用组件前需要注册组件

const App = {
  name: 'app',
  template: '<div>App</div>'
}
avalon.registerComponent(App)

一般在main.js里面这样书写就能启动avalon解析和生成整个应用

import App from './App'
// bootstrap内部会调用registerComponent注册组件
avalon.bootstrap({
  el: '#app',
  component: App
})

当在template里面用到自定义组件时，需要引入该自定义组件并在定义template的组件对象里显示声明使用该自定义组件

import Header from '@/components/Header'
import Footer from '@/components/Footer'

let template = 
`
<div>
  <ms-header />
  <ms-footer />
</div>
`

export default {
  name: 'app',
  template,
  components: {
    Header,
    Footer
  }
}

如果要对自定义组件传递参数，那么在template里需要使用widget参数

<ms-alert :widget="[{global: true}]" />
<ms-alert :widget="[alertProps]" />

这里widget的值是一个数组，数组里包含要传递给组件的props对象