组件简介
@H_502_3@组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: @H_502_3@
那么什么是组件呢?
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素。
@H_502_3@组件的创建和注册@H_502_3@
Vue.js的组件的使用有3个步骤: 运行结果如下:
@H_502_3@
可以看到,使用组件和使用普通的HTML元素没什么区别。@H_502_3@
我们用以下几个步骤来理解组件的创建和注册:
1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例。
2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。
3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。
4. Vue.component()方法内部会调用组件构造器,创建一个组件实例。
5. 请注意第5点,以下代码在3个地方使用了my-component标签,但只有#app1和#app2下的my-component标签才起到作用。@H_502_3@
<div id="app2">基本步骤
@H_502_3@
创建组件构造器、注册组件和使用组件。
@H_502_3@
理解组件的创建和注册
@H_502_3@
组件应该挂载到某个Vue实例下,否则它不会生效。
@H_502_3@