An Introduction to Components笔记 | 天一阁

An Introduction to Components笔记

An Introduction to Components

Vue提供组件(Component)机制,就是可以复用的一段代码。也是一个vue实例,他可以通过自己的标签被嵌入到整个vue的web app中。

大体上创建实例所需的选项是一样的,唯一需要注意的就是组件的data选项,在component中data不是一个对象,而是一个函数,通过一个函数来返回一个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
<script type="text/javascript">
Vue.component('my-cmp', {
data: function(){
return {
status:'normal'
}
},
template: '<h1>Status: {{ status }}</h1>'
});
new Vue({
el: "#app"
});
</script>
全局和本地组件注册

通过Vue.component('cmp-name', {})注册组件是全局有效的,任何Vue实例都可以直接引用。如果是在vue实例的components的属性中注册,那就只有当前这个vue实例内可以使用对于其他实例是无效的。

App.vue

通过vue-cli用模板创建的文件,都是用组件的形式开发了,其中有一个根组件,就是App.vue。相当于整个web app的首屏入口,这里主要是注意一下data选项要按组件的规则写,也就是写成函数形式。

ES6 import export

每天都发现一点ES6的新语言特性,好理解,但是不好记忆。说简单了,就是javascript要做成可以模块化,工程化的大型开发语言。于是又export import这样类似 include 这样语句。道理明白,但要适应需要一个过程,要是达到能够运用的阶段,又是很长的一个过程。