首页 > temp > JavaScript教程 >
-
vue学习指南：第六篇(详细) - Vue的组件 component
1. 什么是组件？有两种解释
1. 第一种解释：
什么是组件？
1. 组件是 vue 中的一个可复用的实例，所以new Vue() 是vue中最大的那个组件(根组件)，有名字，使用的时候以单标签或双标签使用。
2. Vm = new vue() 是最大的组件，具有很多实用性的属性，比如 data，methods，computed等，所以定义的组件也有这些属性。
2. 第二种解释：
什么是组件？
1. 组件的出现就是为了拆分 vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以调用对应的组件即可。
组件化和模块化的不同之处？
模块化：是从代码逻辑的角度，进行划分的，在node是给予模块化的，node没ui界面，node用得最多的是模块化，把代码按照不同的功能进行划分，保证每个模块化的值单一。方便后台代码，分离开发，保证每个功能模块的 值 能单一。
组件化：是从ui界面的角度来划分的，方便ui组件的重用
3. 组件的定义
1. vue 使用 Vue.component() 方法定义组件，这个方法有两个参数，第一个是组件名，第二个是 options对象，这个对象里面有 template，data，methods，computed等属性。
2. template 是模板，里面是html格式，只能有一个顶层标签。
3. data 是放数据的，它是一个函数 return 一个对象，数据都放在这个对象离面。
全局注册组件：
1. Vue.component 第一个参数，组件的名称，将来 在引用组件的时候，就是一个以标签形式来引入它的。
2. 第二个参数：将Vue.extend 省略掉，直接 {} 创建的组件，其中 template就是组件将来要展示的html内容。
|
1
2
3
|
Vue.component('mycom3', { template:'#tmp1'}) |
3. 属于组件的结构，也要符合定义组件的规则，只能有一个唯一的根元素
|
1
2
3
4
5
6
|
<template id="tmp1"> <div> <h1>这是 template 在外部定义的组件结构，这个方式有代码的提示和高亮</h1> <h3>好用</h3> </div></template> |
4. 在被控制的 #app 外面 使用咱们的 template 元素定义属性的模板结构
|
1
2
3
|
<div id="app"> <mycom3></mycom3></div> |
以上都是创建全局的组件，所谓全局就是创建的组件不仅仅，能让你app1能使用，
你再创建个vue根元素也能使用。
插件私有组件：
组件中的 data 和 实例中的 data 有什么区别？
1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样，实例中的data，可以为一个对象，但组件中的data，必须是个方法。
3. 组件中的 data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行。
4. 组件中的 data 数据 使用方法 和 实例中的data 使用方式完全一样。
作者：晋飞翔
