关于vue组件的介绍
这篇文章将为大家详细讲解关于vue 组件的介绍,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联主要从事网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务鸡西,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
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: "" };
这种形式在运行时才把template编译成render函数,因此需要启用运行时编译(runtime-compiler)
2. 单文件组件(推荐)
创建.vue后缀的文件,定义如下
里只能有一个根节点,即第一层只能有一个节点,不能多个节点平级 这种形式在打包的时就编译成render函数,因此跟推荐这种方式定义组件 1. 全局注册 全局注册是通过Vue.component()注册 优点 缺点 适合 2. 局部注册 在需要的地方导入 优点 缺点 适合 组件复用 customButton 组件 每个组件都会创建一个新实例,组件的data必须是function,因为每个实例维护自己的data数据 1. 通过props属性 定义一个button,按钮文本通过props传入 调用者通过attribute传入 运行效果 2. 通过插槽 组件在需要替换的地方放入插槽 调用者的innerHtml会替换插槽的值,若为空,使用默认的 运行效果 注意:看到是用自定义组件的innerHtml替换插槽,若插槽只有一个,可以不写name attribute,若多个插槽需指定插槽name attribute 1. 在组件内部调用this.$emit触发自定义事件 2. 调用者监听自定义事件 Total click {{totalClicks}} times 3. 运行效果 关于vue 组件的介绍就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。组件注册
import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)
组件使用
组件传参
自定义事件
当前文章:关于vue组件的介绍
转载注明:http://scjiangan.com/article/gsschd.html
其他资讯