Vue组件封装的过程

vue组件的定义

组件(Component)是Vue.js最强大的功能之一
组件可以扩展HTML元素，封装可重用代码
在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能
某些情况下，组件也可以表现用 `js` 特性进行了扩展的原生的HTML元素
所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子函数

vue组件的功能

能够把页面抽象成多个相对独立的模块
实现代码重用，提高开发效率和代码质量，使得代码易于维护

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、标签创建，需要加上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>

案例：

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>

显示效果：

Vue组件封装的过程相关推荐

Vue组件封装，（面试回答）
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
Vue组件封装（面试必问）
先说一下vue组件封装的优点组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素, 封装可重用代码组件是可复用的Vue 实例组件可以提升整个项目的开发效率.能够把页 ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...

Vue组件封装的过程

Vue组件封装的过程

Vue组件封装的过程相关推荐

最新文章

热门文章