vue组件的封装（marksheng珍藏版——前端必备）

我就是我 2022-11-13 04:15 282阅读 0赞

> **vue组件的定义**
> 
> ● 组件(Component)是Vue.js最强大的功能之一
> 
> ● 组件可以扩展HTML元素，封装可重用代码
> 
> ● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能
> 
> ● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素
> 
> ● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子
> 
> **vue组件的功能**
> 
> 1）能够把页面抽象成多个相对独立的模块
> 
> 2）实现代码重用，提高开发效率和代码质量，使得代码易于维护

# #

## **Vue组件封装过程** ##

> ● 首先，使用Vue.extend()创建一个组件
> 
> ● 然后，使用Vue.component()方法注册组件
> 
> ● 接着，如果子组件需要数据，可以在props中接受定义
> 
> ● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

**组件使用流程详细介绍**

> **1、组件创建---有3中方法，extend()      <template id=''>      <script type='text/x-template'  id=''>**
> 
> A、调用Vue.extend()，创建名为myCom的组件，template定义模板的标签，模板的内容需写在该标签下
> 
> var myCom = Vue.extend(\{  
>     template: '<div>这是我的组件</div>'  
> \})  
> B、<template id='myCom'>标签创建，需要加上id属性
> 
> <template id="myCom">  
>     <div>这是template标签构建的组件</div>  
> </template>  
> C、<script type='text/x-template' id='myCom'>,需加id属性，同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码
> 
> <script type="text/x-template" id="myCom1">  
>     <div>这是script标签构建的组件</div>  
> </script>  
> **2、注册组件----有2中方法，全局注册，局部注册**
> 
> A1、全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。
> 
> 我们先用全局注册，注册上面例子中创建的myCom组件
> 
> Vue.component('my-com',myCom)  
> A2、全局注册语法糖：不需要创建直接注册的写法
> 
> Vue.component('my-com',\{  
>     'template':'<div>这是我的组件</div>'  
> \})  
> 'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。
> 
> A3、如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值
> 
> Vue.component('my-com',\{  
>     template: '\#myCom'  
> \})  
> B1、局部注册：只能在注册该组件的实例中使用，一处注册，一处使用
> 
> var app = new Vue(\{  
>     el: '\#app',  
>     components: \{  
>         'my-com': myCom  
>     \}  
> \})  
> B2、局部注册语法糖：
> 
> var app = new Vue(\{  
>     el: '\#app',  
>     components: \{  
>         'my-com': \{  
>            template: '<div>这是我的组件</div>'  
>         \}  
>     \}  
> \})  
> B3、<template>及<script>创建的组件，局部注册
> 
> var app = new Vue(\{  
>     el: '\#app',  
>     components: \{  
>         'my-com': \{  
>            template: '\#myCom'  
>         \}  
>     \}  
> \})  
> **3、调用组件**
> 
> 只需要在调用组件的地方，写上组件名字的标签即可
> 
> <div>  
>     /\*调用组件\*/  
>     <my-com></my-com>  
> </div>  
> **4、栗子**
> 
>  
> 
> A、全局注册：新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2
> 
>  
> 
> <!DOCTYPE html>  
> <html lang="en">  
> <head>  
>     <meta charset="UTF-8">  
>     <title>vue组件</title>  
>     <script src="vue.js"></script>  
> </head>  
> <body>  
>     <div id="app1">  
>         <my-com></my-com>  
>     </div>  
>     <div id="app2">  
>         <my-com></my-com>  
>     </div>  
>    
>     <script>  
>         /\*创建组件\*/  
>         var myCom = Vue.extend(\{  
>             template: '<div>这是我的组件</div>'  
>         \});  
>         /\*全局注册组件\*/  
>         Vue.component('my-com',myCom);  
>    
>         /\*定义vue实例app1\*/  
>         var app1 = new Vue(\{  
>             el: '\#app1'  
>         \});  
>    
>         /\*定义vue实例app2\*/  
>         var app2 = new Vue(\{  
>             el: '\#app2'  
>         \});  
>     </script>  
> </body>  
> </html>