什么是组件
组件系统是 vue 的另一个重要概念, 它是一种抽象, 允许我们使用小型, 独立和通常可复用的组件构建大型应用, 因此, 几乎任意类型的应用界面都可以看成一个组件树:
图片. png
组件的作用既可以从父作用域将数据传到子组件, 也可以将把组件内部的数据发送到组件外部, 可以实现互相传送数据
组件的使用
(一) 组件使用之全局注册
我们在一级目录下新建一个全局注册. html 文件, 在该文件中介绍全局注册, 我们还需引入 vue.js 文件
图片. png
按照上面的三步全局注册, 运行出来的页面会报错
图片. png
报的错误意思就是说我们没有注册组件, 那么这是为什么呢?
这里注册组件有两个坑:
第一: 注册组件必须在 Vue 实例化之前
第二: 这里对组件在文档中自定义标签不能用驼峰命名法命名, 可采取小写且包含一个短杆的方式
正确写法如下:
图片. png
渲染为:
图片. png
(二) 局部注册
实际项目中, 我们不必把每个组件都注册到全局, 我们可以通过某个 Vue 实例 / 组件的实例选项 components 注册仅在其作用域中可用的文件
在一级目录下新建一个局部注册. html
下图步骤就是注册一个简单的局部组件
图片. png
(三) 组件使用之注意事项
1,
图片. png
<table>
<my-row>....</my-row>
</table>
自定义组件会被当做无效的内容, 因此会导致错误的渲染结果, 解决方法是使用特殊的 is 特性:
<table>
<tr is="my-row">....</tr>
</table>
2, 组件里面 data 一定要用 function 方式, 不然会传址
如果我们有多个组件, 而这些个组件各自有 data 对象, 其实是共享一个 data 对象, 因此会相互影响, 所以要写成
data: function () {
return {
}
}
这样每个组件都会有它自己的 data 对象, 互相之间不会影响
而且 data 里面的数据, 只能在组件的 template 里面才能生效
图片. png
组件的引入方式
(一) 直接引入
模板中使用标签引入
(二) 通过 is 属性动态引入
图片. png
通过点击按钮来动态切换组件
图片. png
图片. png
keep-alive 是 vue 特定用来做缓存的标签
来源: http://www.jianshu.com/p/ce97328a9085