详解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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
javascript实现超好看的3D烟花特效
Jan 01 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
Email+URL的判断和自动转换函数
2006/10/09 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php curl常用的5个经典例子
2017/01/20 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python global和nonlocal用法解析
2020/02/03 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
初三开学计划书
2014/04/27 职场文书
艺术教育实施方案
2014/05/03 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
三年级学生期末评语
2014/12/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL