这篇内容是关于组件在Vue中的引入和使用；什么是组件以及做组件化的开发，在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码耦合度，便于维护和管理；讲起来可能比较文绉绉，举一个简单的例子；

通过以上例子是不是对组件有了新的认识，以及用组件化开发的一些益处！

组件的注册方式：

1）全局注册：Vue.component方法

2）局部注册：Vue实例的components属性

全局注册 - 自定义组件

ps：下面通过全局注册的方式来完成一个自定义组件 "modleA"；Vue.component("组件名",{ template : ( 放置组件的DOM结构，有对应methods，computed...) })

<div id="app"><model></model>
</div>
<script>Vue.component("modle",{template:`<div><p>这就是一个modle组件</p></div> `})new Vue({el:'#app',data:{}})
</script>

接下来我们可以在组件当中设置一个按钮，点击按钮时反馈输出在控制台上；

<div id="app"><model></model>
</div>
<script>Vue.component("modle",{template:`<div><p>这就是一个modle组件</p><button @click="handleClick">点击</button></div> `,methods:{handleClick(){console.log('触发组件当中的handleClick事件！')}}})new Vue({ el:'#app'})
</script>

组件当中还有其他的，比如 watch，computed...都可以来使用；那么在项目中如何来运用组件，复用等会在后面做项目演示的时候进行一个讲解；这里如果去当前页面测试复用，我们只需要编写组件名称作为标签即可。

<div id="app"><modle></modle><modle></modle><modle></modle>
</div>

以上就是全局注册组件的引入和使用；下面来讲局部注册组件的引入和使用！

局部注册 - 自定义组件

在原来的modle组件当中我们来用这个components属性对child组件进行局部注册；

<script>Vue.component("modle",{components:{"child":{template:`<div><p>这就是一个child组件</p><button @click="handleClick">点击</button>  </div> `,methods:{handleClick(){console.log('触发组件当中的handleClick事件！')}}}},template:`<div><p>这就是一个modle组件</p><button @click="handleClick">点击</button><child></child></div> `,methods:{handleClick(){console.log('触发组件当中的handleClick事件！')}}})new Vue({el:'#app'})
</script>

页面效果：

那么child这个组件只能被当前的modle访问到，而其他组件访问不到；进行测试一下，写一个全局组件modles看能否访问到局部组件child；

<div id="app"><modle><modle><modles><modles>
</div>
...
Vue.component("modles",{template:`<div><p>modles组件</p><child></child></div>`})

以上内容就是讲全局和局部注册自定义组件的内容，下面讲组件当中注意的点或者你可能遇到的问题，完后进行小结一下有关组件的一些内容；

组件名称

在编写组件起名称的时候当然是希望能更贴近内容本身，如我们要做一个底部进行复用可以是tabbar，导航可以navbar等之类的，那么当我们起以下的名称就需要注意一些问题了，下面来看一下；

<div id="app"><moduleA></moduleA>
</div>
<script>Vue.component("moduleA",{template:`<div> moduleA组件 </div>`})new Vue({el:'#app'})
</script>

运行一下，会发现这样的一个错误 Unknown custom element: <modulea> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这里就是命名的方式写法不对，名字是 "驼峰式" 的，那么在html代码编写不能写为 <moduleA>，应该写成< module-A >的写法，下面我们修改运行一下：

<div id="app"><module-A></module-A>
</div>

自定义组件data必须是一个函数

自定义组件当中这个methods、computed和watch与正常的写法并无二样，唯独这个data，为什么自定义组件当中的data必须是一个函数呢？下面用一个简单的例子：

<script>Vue.component("moduleA",{template:`<div> moduleA组件 - name：{{name}} </div>`,data(){return{name:'sy'}}})new Vue({el:'#app',data:{}})
</script>

如果现在我写成这个data是一个对象而不是一个函数的话，会是怎么样呢？报错

...
// data(){
//     return{
//         name:'sy'
//     }
// }data:{name:'sy'
}
...

这里能发现data不是这样data:{}，而是data(){return{}}，数据以一个函数的返回值的形式，下面小结为什么自定义组件data必须是一个函数？

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，让各个组件实例维护各自的数据，互不干扰；如果单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果；

小结

下面来对这篇内容的一些东西进行一个小结以及所遇的问题；

1. 组件起名称：js(script)中编写驼峰式，则html需要用连接符 -
2. 组件中编写DOM结构时：没有代码的高亮显示（解决：通过vue单文件组件解决）
3. 组件中编写DOM时用到css：只能写行内样式（解决：通过vue单文件组件解决）
4. template(模板)：包含一个根节点（ps：将内容包裹起来）
5. 组件是孤岛，无法（直接）访问外边其他组件的状态或者方式（解决：间接的组件通信）
6. 自定义组件data必须是一个函数
7. 所有的组件写在同一个页面，代码很乱（解决：通过vue单文件组件解决）补充：刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲，虽然用起来好用,但觉得不方便，这个在后面做项目的时候是通过vue单文件组件可以解决的，所以这些问题都在后续有其他的变化；使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法，那么就需要通过组件与组件之间间接通信完成；可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决；

本篇内容就讲解了Vue组件的引入和基本使用以及一些组件相关的知识点，接下来就来讲解相关组件的一些通信方式！感谢大家的观看，支持一下！

第二十一篇 vue组件引入使用相关推荐

奋斗的小孩系列 FPGA学习altera系列: FPGA学习altera 系列第二十一篇数码管设计
奋斗的小孩系列 FPGA学习altera系列: FPGA学习altera 系列第二十一篇数码管设计作者:奋斗的小孩郝旭帅(转载请注明出处) 大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是 ...
vue组件引入scss变量_SCSS特色的Vue.js ui组件设计系统
vue组件引入scss变量 Kotti设计系统 (Kotti Design System) This design system helps to unify our design language ...
vue组件引入外部js同时获取变量，解决重复引入
vue组件引入外部js同时获取变量引入文件支持加载成功回调,支持通过字符串变量名获取js文件的变量 /*** 引入js文件并且获取变量* @param src js路径* @param varia ...
vue组件引入本地静态图片
vue2组件引入本地图片的的两种方式: 1,使用@引入: 这是在组件内直接引用和普通的html方法一样,代码如下 <img src="@/assets/test.png" a ...
vue知识总结第一篇vue组件的定义以及父子组件的传值。
vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中..script用来写js,style中用来写css.那么我们来看看 ...
python之路2.0_Python之路【第二十一篇】:JS基础
1.2 ECMAScript 尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分.实际上,一个完整的 JavaScript 实现 ...
第二十一篇：伦理/道德Ethics
目录什么是伦理/道德? 我们为什么要关心? 为什么道德很难? 学习成果大纲反对 NLP 道德检查的论据我们应该审查科学吗? H5N1 透明度不是更好吗? AI vs. Cybersecurit ...
精通Spring Boot—— 第二十一篇：Spring Social OAuth 登录简介
2019独角兽企业重金招聘Python工程师标准>>> 1.什么是OAuth OAuth官网介绍是这样的: An open protocol to allow secure auth ...
Python之路(第二十一篇) re模块
一.re模块正则表达式本身是一种小型的.高度专业化的编程语言,正则表达式就是字符串的匹配规则,在多数编程语言里都有相应的支持,python里对应的模块是re,正则表达式模式被编译成一系列的字节码,然 ...

第二十一篇 vue组件引入使用