Vue组件封装的过程
时间:2022-07-25
本文章向大家介绍Vue组件封装的过程,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>'
})
- 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: '<div>这是我的组件</div>'
}
}
})
- 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>
- 显示效果:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux提权姿势一:滥用SUDO提权
- Linux提权姿势二:利用NFS提权
- 统计回归拟合方程参数
- biomaRt包实现不同物种之间同源基因转换
- 使用OpenCV和Python标记超像素色彩
- 听说,你的Loki还是单体?(上篇)
- 加一
- APP自动化测试系列之Appium介绍及运行原理
- 没想到吧,Markdown 还能这么玩!
- 致敬Vue3: 1.1万字从零解读Vue3.0源码响应式系统
- APP自动化测试系列之Desired Capabilities详解
- Kafka分区分配策略(Partition Assignment Strategy)
- 内网渗透-代理篇(一)
- java学习应用篇|逃不掉的HelloWorld
- java学习原理篇|java程序运行套路