详解vue 组件


Posted in Javascript onJune 11, 2020

Vue的两大核心

1. 数据驱动 - 数据驱动界面显示

2. 模块化 - 复用公共模块,组件实现模块化提供基础

组件基础

组件渲染过程

template ---> ast(抽象语法树) ---> render ---> VDom(虚拟DOM) ---> 真实的Dom ---> 页面

Vue组件需要编译,编译过程可能发生在

  • 打包过程 (使用vue文件编写)
  • 运行时(将字符串赋值template字段,挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)

对应的两种方式 runtime-only vs runtime-compiler

runtime-only(默认)

  • 打包时只包含运行时,因此体积更少
  • 将template在打包的时候,就已经编译为render函数,因此性能更好

runtime-compiler

  • 打包时需要包含(运行时 + 编译器),因此体积更大,大概多10Kb
  • 在运行的时候才把template编译为render函数,因此性能更差

启用runtime-compiler

vue.config.js(若没有手动创建一个)

module.exports = {
 runtimeCompiler: true //默认false
}

组件定义

1. 字符串形式定义(不推荐)

例子

const CustomButton = {
 template: "<button>自定义按钮</button>"
};

这种形式在运行时才把template编译成render函数,因此需要启用运行时编译(runtime-compiler)

2. 单文件组件(推荐)

创建.vue后缀的文件,定义如下

<template>
 <div>
 <button>自定义按钮</button>
 </div>
</template>

<template> 里只能有一个根节点,即第一层只能有一个节点,不能多个节点平级

这种形式在打包的时就编译成render函数,因此跟推荐这种方式定义组件

组件注册

1. 全局注册

全局注册是通过Vue.component()注册

import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)

优点

  • 其他地方可以直接使用
  • 不再需要components指定组件

缺点

  • 全局注册的组件会全部一起打包,增加app.js体积

适合

  • 基础组件全局注册

2. 局部注册

在需要的地方导入

<template>
 <div id="app">
 <customButton></customButton>
 </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
 name: "App",
 components: { CustomButton }
};
</script>

优点

  • 按需加载

缺点

  • 每次使用必须导入,然后components指定

适合

  • 非基础组件

组件使用

组件复用

<template>
 <div id="app">
 <img alt="Vue logo" src="./assets/logo.png" />
 <customButton></customButton>
 <customButton></customButton>
 <customButton></customButton>
 </div>
</template>

customButton 组件

<template>
 <div id="app">
 <button @click="increment">click me {{times}} times</button>
 </div>
</template>
<script>
export default {
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 return this.times++;
 }
 }
};
</script>

每个组件都会创建一个新实例,组件的data必须是function,因为每个实例维护自己的data数据

组件传参

1. 通过props属性

定义一个button,按钮文本通过props传入

<template>
 <button> {{buttonText}} </button>
</template>
<script>
export default {
 props: {
 buttonText: String
 }
};
</script>

调用者通过attribute传入

<customButton buttonText="Button 1"></customButton>
<customButton buttonText="Button 2"></customButton>
<customButton buttonText="Button 3"></customButton>

运行效果

详解vue 组件

2. 通过插槽<slot></slot>

组件在需要替换的地方放入插槽<slot></slot>

<template>
 <button style="margin:10px"><slot>Defalt Button</slot></button>
</template>
<script>
export default {
 props: {
 buttonText: String
 }
};
</script>

调用者的innerHtml会替换插槽的值,若为空,使用默认的

运行效果

详解vue 组件

注意:看到是用自定义组件的innerHtml替换插槽,若插槽只有一个,可以不写name attribute,若多个插槽需指定插槽name attribute

自定义事件

1. 在组件内部调用this.$emit触发自定义事件

<template>
 <div style="margin:10px">
 <button @click="increment">
 <slot>Defalt Button</slot>
 </button>
 <span>Click me {{times}} times</span>
 </div>
</template>
<script>
export default {
 props: {
 buttonText: String
 },
 data() {
 return { times: 0 };
 },
 methods: {
 increment() {
 this.times++;
 ("increment");
 }
 }
};
</script>

2. 调用者监听自定义事件

<template>
 <div id="app">
 <customButton @increment="handleIncrement"></customButton>
 <customButton @increment="handleIncrement">
 <span style="color:blue">Button 2</span>
 </customButton>
 <customButton @increment="handleIncrement">Button 3</customButton>
 <p>Total click {{totalClicks}} times</p>
 </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
 name: "App",
 components: { CustomButton },
 data() {
 return { totalClicks: 0 };
 },
 methods: {
 handleIncrement() {
 this.totalClicks++;
 }
 }
};
</script>

3. 运行效果

详解vue 组件

以上就是详解vue 组件的详细内容,更多关于vue组件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
angularJS 入门基础
Feb 09 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
js 作用域和变量详解
Feb 16 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
vue调用语音播放的方法
Sep 27 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
You might like
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
浅谈Python的垃圾回收机制
2016/12/17 Python
代码分析Python地图坐标转换
2018/02/08 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
python tkinter canvas使用实例
2019/11/04 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
艺术设计专业个人求职信
2014/04/10 职场文书
交通安全责任书范本
2014/07/24 职场文书
班组拓展活动方案
2014/08/14 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Go语言基础知识点介绍
2021/07/04 Golang
mysql数据库如何转移到oracle
2022/12/24 MySQL