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