Vue学习计划基础笔记(六) - 组件基础
组件基础
目标:
- 掌握组件的构建方式
- 掌握如何复用组件、父子组件如何传值、如何向父组件发送消息
- 掌握如何通过插槽分发内容
- 了解解析dom模板时的注意事项
- 了解动态组件
组件
- 组件理解起来大概上就和php的include一样, 也就是把页面分成几个部分(或文件).
- 组件就是把页面分成几块,每一块就是一个组件,组件使用起来就是引入,声明,使用.
- 很通俗的说,组件的使用就是自定义html标签的使用.
组件的注册(定义)
1.全局组件
// (组件名, 配置)
Vue.component('cpn-name',{data: function(){return {count: 0}}template: '<button @click="count++">{{count}}</button>'
});
2.局部组件
...
components: {cpnName: {data: function(){return {count: 0}}template: '<button @click="count++">{{count}}</button>'}
};
...
- 单文件组件
组件注意点
组件名的大小写
定义的时候可以使用 my-component 或者 MyCompnent 这样的形式
使用的时候因为html是大小写不敏感的, 在DOM(非字符串模版)中使用时只有my-component的形式是有效的.组件的data必须是一个函数
这个函数返回一个对象.
至于为什么要是function(){return{..}}的形式, 那是因为这样每个实例可以维护一份被返回对象的独立的拷贝, 不然复用的时候会相互影响.组件的复用
组件在复用的时候,因为data的定义是return的对象,所以每用一次组件,就会有一个它的新 实例 被创建, 同样data也会是新的.单个根元素
在构建组件的时候,组件只能有一个根元素,如果组件内包含多个元素,根元素只能有一个.组件的使用
<my-component></my-component>
这样使用就可以了
(在单文件组件(Vue文件)中文档推荐使用<my-component/>
这种写法,但是在HTML中文档不推荐使用<my-component/>
这种写法,因为HTML并不支持自闭合的自定义元素)
组件传递数据
父组件 => 子组件 (通过prop)
- prop是组件上自定义的特性,在 父组件 使用子组件的时候加上. 可以在 子组件 注册的时候通过props0拿到这些prop值.
- 例子
<blog-post title="Blogging with Vue"></blog-post>
Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'
})
编译后:
<h3>Blogging with Vue<h3>
子组件 => 父组件 (通过$emit()发送事件传递参数)
在模版中使用普通的js事件来触发$emit(),
$emit('my-event')是一个用来主动触发事件的方法,
而这个'my-event'就是可以在 父组件 使用子组件的时候加上的,
利用触发这个'my-event'可以触发父组件中的methods
中间只要传递参数就可以实现传值了- 例子
Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><button v-on:click="$emit('enlarge-text')"> <!-- 1.触发enlarge-text -->Enlarge text</button><div v-html="post.content"></div></div>`
})
<blog-postv-on:enlarge-text="postFontSize += 0.1" <!-- 2.被触发enlarge-text然后执行对应操作 -->
></blog-post>
组件插槽(slot)分发内容
一般来说,两个开闭标签之间是有内容的,那么如果在组件(自定义标签)开闭标签之间写入的内容的话会怎么样, slot就是用在接收的了, 只要在组件模版里面写上就可以接收了.
- 例子:
Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>`
})
<alert-box>这是错误</alert-box>
编译后:
<div class="demo-alert-box"><strong>Error!</strong>这是错误</div>
动态组件
- 概括: 使用一个is特性(属性),来指定组件
- 也就是我们可以动态的去改变is的值, 然后实现动态的显示不同的组件
- 例子:
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
解析DOM模版时的注意事项
在HTML标准中,有些元素是固定的嵌套的, 例如ul>li, ol>li,table, select, 假如要在这些标签内使用组件,就需要使用is来指定组件,不然就会报错.
- 例子:
<!-- 报错 -->
<table><blog-post-row></blog-post-row>
</table>
<!-- 正确 -->
<table><tr is="blog-post-row"></tr>
</table>
转载于:https://www.cnblogs.com/chifung/p/9327912.html
Vue学习计划基础笔记(六) - 组件基础相关推荐
- 3D视觉学习计划之PCL库的基础知识
3D视觉学习计划之PCL库的基础知识 一.PCL库的概述 PCL是一个大型跨平台开源C++编程库,它在吸收了前人点云相关研究基础上建立起来,实现了大量点云相关的通用算法和高效数据结构,涉及到点云获取. ...
- 【Vue学习第三天】组件的使用
整理的内容 Vue中组件的一些用法和概念 创建组件 父子组件传值 组件的切换 使用slot分发内容 什么是组件 组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ...
- Vue学习记录 (ref,生命周期,组件,router)
ref="名称":注册引用信息 this.$ref.名称:获取对象(此为操作dom节点) 计算属性:computed 在差值表达式中调用此函数会直接返回计算结果,而不是函数本身 当 ...
- Vue学习二:安装element-ui组件库
上一章:搭建Vue环境 搭建完vue环境后,安装element-ui使用其组件库,提高开发效率. 1.打开cmd,cd到在项目目录下 执行npm install element-ui,安装完成后,查看 ...
- 鸟哥学习笔记六(基础篇第十一章)
type:查看指令是否是bash内建指令 变量的设定规则 1. 变量与变量内容以一个等号『=』来连结,如下所示: 『myname=VBird』 2. 等号两边不能直接接空格符,如下所示为错误: 『 ...
- Python学习笔记(六)Python基础_数据类型——字符串
文章目录 字符串 字符串输入 字符串拼接 字符串操作 字符串格式化 访问字符串中的值 字符串切片 字符串遍历 常用的字符串方法 字符串 字符串是 Python 中最常用的数据类型:一般以使用引号' ' ...
- vue 从入门到入土---复习 组件基础上
目录 单页面应用程序 vite 的基本使用 组件化开发思想 vue 组件的构成 组件的基本使用 封装组件的案例 总结 单页面应用程序 1. 什么是单页面应用程序 单页面应用程序 (英文名: S ing ...
- python函数和模块有什么关键特性_Python学习----第一模块笔记(Python基础知识)...
1.python是什么? python是动态解释型的强类型定义语言. python官方版本的解释器是CPython.该解释器使用C语言开发. 当前主要使用3.x版本的python. 2.第一个pyth ...
- 【pytorch基础笔记六】基于CYCLEGAN的马转斑马尝试
[参考资料] [1]https://github.com/aitorzip/PyTorch-CycleGAN [2]<深入浅出GAN生成对抗网络> 8.2 CycleGan 尝试了下cyc ...
- C语言if和汇编jcc程序对比,逆向基础笔记六 汇编跳转和比较指令
JCC指令 cc 代表 condition code(状态码) Jcc不是单个指令,它只是描述了跳转之前检查条件代码的跳转助记符 例如JNE,在跳转之前检查条件代码 典型的情况是进行比较(设置CC), ...
最新文章
- Linux下设置进程使用指定核的CPU
- tcp3次握手,https加密,ca认证
- mysql中IFNULL(字段名,默认值) 给null设置默认值
- 高德地图画带箭头的线_精选 | 这款充电线逆天了!一条顶三条,让其它线都“下岗”吧...
- 2017.4.16 阶乘之和 思考记录
- 【图像增强】基于matlab频域+密度分割+灰度级-彩色变换伪彩色图像增强【含Matlab源码 1011期】
- 增霸卡传输掉线/无法登录/再次登录时间长
- 自己做量化交易软件(45)小白量化实战18--直接使用通达信自编指标公式进行分析绘图和回测
- Matlab根据广播星历表计算卫星坐标
- max30102c语言程序,MAX30102基于STM32F103C8T6的程序源码
- Bloombox:iPhone陶瓷底座,还能当花盆和扩音器
- mysql有订单表orders_mysql练习作业题
- validateform.js表单验证工具
- 再获2亿元A+轮融资,乐生智能能否“扫出”舒适区?
- ping命令TTL的意思
- 微信气泡主题设置_微信气泡主题怎么设置_微信气泡主题怎么设置方法_掌通手游...
- 《我编程,我快乐》 摘抄
- Linux kernel oops
- 计算机主题波形是哪个,如何设置电脑PPT主题为波形?
- 橡胶密封件的设计注意事项