2018/1/31 20:02:19当前位置推荐好文程序员浏览文章

什么是组件

组件系统是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图片.png

keep-alive是vue特定用来做缓存的标签

网友评论