学习Vue中的使用组件总结

今天早上花时间整理更新了一下自己的博客内容，有和我一样在学习阶段的小伙伴也可以去看一下我的笔记分享哈，博客网站是heliang.fun。回归今天所学的使用组件总结，首先我们要搞清楚组件的作用和定义还有使用组件有什么样优势和好处，组件它被定义为现实应用中局部功能代码和资源的集合，优势就是提高代码的复用率，好处则是使得代码更好的维护。了解了组件的基本作用和优势之后就来说一下组件的基本使用步骤吧，步骤主要分为三大步，肯定第一步我们先要创建组件，第二步就是给已经创建好的组件进行注册，第三步则是如何使用它，创建组件要在Vue实例外面去创建，它的语法是 变量=Vue.extend()，这里有个需要注意的惯性思维就是我们习惯的在里面写el这个配置属性来决定它服务于哪个容器，这里如果写了el的话控制台是会报错的，因为刚才说到的组件是拿来复用的而不是指定它去服务哪个容器，换句话说就是它可以服务很多个容器所以不能让它去指定服务某一个容器，创建的这些组件最后都是归vm管理的，所以需要由vm去决定服务哪个容器，还有一个需要注意的点就是组件里面的data不能习惯性的写成对象，因为写成对象形式的话我们在不同容器去更改数据时其实更改的是同一个对象这时就会出现不同容器直接的数据干扰，控制台同样会报错，很明显这影响了代码的复用，所以我们需要把它写成一个函数，再使用函数的return去返回里面的data数据，这样就不会出现容器之间的数据干扰了。创建完组件第二步就是注册组件，这时注册就决定了组件是为哪个容器所服务，很明显它是写在Vue实例里面的，这里用到了一个新的配置项叫components，在这里面就要给组件起一个名字（key值），再用刚才创建组件时接住的变量（value值）作为一个中转变量，如果key和value同名的话简写成一个即可。完成注册之后最后一步就是使用组件，这里就需要在容器内使用一个新的标签类型叫组件标签，就是把刚才注册好的组件名给它写成传统的双标签形式即可，这时我们回到页面中就可以看到我们刚才创建组件里面写的内容了。这样基本的三大步就完成了一个组件的使用，最后要提的就是组件的全局配置，这个在开发中比较少用到，它的书写位置在Vue实例外，语法是Vue.component('要注册的组件名','接住组件的变量名')，这样就配置好了全局组件，这样多个容器都可以用同一个组件名来使用该组件了。