组件是vue中的核心概念,几乎所有的应用都是围绕着组件来展开的。在vue的设计中将组件作为基础元素,由它组成了整个应用的布局。这更方便我们重复使用,有了组件,我们可以更高效合理地开发和维护我们的项目。
用一张图片来了解什么是组件:
注册
要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如:
Vue.component('my-component', {
// 选项
})
组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component>
的形式使用。要确保在初始化根实例 之前 注册了组件:
<div id="example">
<my-component></my-component>
</div>
// 注册
Vue.component('my-component', {
template: '<div>组件</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
局部注册
不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用:
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
这种封装也适用于其它可注册的 Vue 功能,如指令。
DOM 模版解析说明
当使用 DOM 作为模版时(例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul>
, <ol>
, <table>
, <select>
限制了能被它包裹的元素, <option>
只能出现在其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table>
<my-row>...</my-row>
</table>
自定义组件 <my-row>
被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的**重点内容**is 属性:
<table>
<tr is="my-row"></tr>
</table>
应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用:
<script type="text/x-template">
- JavaScript内联模版字符串
- .vue 组件
单文件组件
在很多Vue项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。
- 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复。
- 字符串模板(String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \
- 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
- 没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器,如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 Webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue 的简单实例:
<template>
<div class="message">{{ message }}</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
message: 'Hello World!'
}
}
}
</script>
<style lang="less" scoped>
.message{
text-align: center;
color: red;
}
</style>
注意:
<template>
里只允许一个根元素,如:
<template >
<div>content</div>
</template>
不能写成
<template >
<div>head</div>
<div>content</div>
<div>foot</div>
</template>
- 你可以在每一个语言块中使用任何你想用的预处理器,如 lang=”less”。
- Vue 文件格式可以支持局部 CSS,只要在