组件定义
组件基本包括2个部份：
- 页面结构及样式
使用html标签，对页面布局，再通过css美化展示内容 - 行为
通过JS，动态改变页面内容，触发事件，实现组件间通信，使页面具备交互动作
页面结构及样式
这部分内容定义在<template>标签里
<template>
<div>
...
</div>
</template>
需要注意的是，每个组件必须只有一个根元素，即：
模板<template>里只能包含一个儿子元素，孙子元素及后代元素必须包含在这个儿子元素里。
行为
这部份内容定义在<script>标签里
<script>
// 定义组件
export default {
name: '组件名',
props: ['属性名A', '属性名B'], //定夜组件属性
data: function() { //组件内部状态
return {
a: ''
}
},
methods: {
methodA: () => {
// ...
}
},
//...
}
</script>
实例
项目地址：vue-proj，整个项目非常简单，用于学习练习，依赖element-ui。
项目中自定义了一个<Article>文章组件，含有2个属性: 文章名title, 文章内容。组件设计非常简单，只实现了通过 Prop 向子组件传递数据，如下：
<template>
<div id="app">
<Article :title="title" :content="content"></Article>
</div>
</template>
<script>
import Article from '@/views/Article'
export default {
name: 'App',
data: function() {
return {
title: 'Hello Vue',
content: '这是文章的内容哦！！！'
}
},
components: {
Article
}
}
</script>
父组件App，通过Article属性title, content传递文章标题和内容，向子组件Article传数据，显示效果：
尾声
VUE组件很强大，后续会完善项目例子，使用更多组件的用法，更深入地学习VUE
