组件基础

目标:

  1. 掌握组件的构建方式
  2. 掌握如何复用组件、父子组件如何传值、如何向父组件发送消息
  3. 掌握如何通过插槽分发内容
  4. 了解解析dom模板时的注意事项
  5. 了解动态组件

组件

  1. 组件理解起来大概上就和php的include一样, 也就是把页面分成几个部分(或文件).
  2. 组件就是把页面分成几块,每一块就是一个组件,组件使用起来就是引入,声明,使用.
  3. 很通俗的说,组件的使用就是自定义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>'
}
};
...
  1. 单文件组件

组件注意点

  1. 组件名的大小写

    定义的时候可以使用 my-component 或者 MyCompnent 这样的形式

    使用的时候因为html是大小写不敏感的, 在DOM(非字符串模版)中使用时只有my-component的形式是有效的.

  2. 组件的data必须是一个函数

    这个函数返回一个对象.

    至于为什么要是function(){return{..}}的形式, 那是因为这样每个实例可以维护一份被返回对象的独立的拷贝, 不然复用的时候会相互影响.

  3. 组件的复用

    组件在复用的时候,因为data的定义是return的对象,所以每用一次组件,就会有一个它的新 实例 被创建, 同样data也会是新的.

  4. 单个根元素

    在构建组件的时候,组件只能有一个根元素,如果组件内包含多个元素,根元素只能有一个.

  5. 组件的使用

    <my-component></my-component>这样使用就可以了

    (在单文件组件(Vue文件)中文档推荐使用<my-component/>这种写法,但是在HTML中文档不推荐使用<my-component/>这种写法,因为HTML并不支持自闭合的自定义元素)

组件传递数据

父组件 => 子组件 (通过prop)

  1. prop是组件上自定义的特性,在 父组件 使用子组件的时候加上. 可以在 子组件 注册的时候通过props0拿到这些prop值.
  2. 例子
<blog-post title="Blogging with Vue"></blog-post>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})

编译后:

<h3>Blogging with Vue<h3>

子组件 => 父组件 (通过$emit()发送事件传递参数)

  1. 在模版中使用普通的js事件来触发$emit(),

    $emit('my-event')是一个用来主动触发事件的方法,

    而这个'my-event'就是可以在 父组件 使用子组件的时候加上的,

    利用触发这个'my-event'可以触发父组件中的methods

    中间只要传递参数就可以实现传值了

  2. 例子

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-post
v-on:enlarge-text="postFontSize += 0.1" <!-- 2.被触发enlarge-text然后执行对应操作 -->
></blog-post>

组件插槽(slot)分发内容

  1. 一般来说,两个开闭标签之间是有内容的,那么如果在组件(自定义标签)开闭标签之间写入的内容的话会怎么样, slot就是用在接收的了, 只要在组件模版里面写上就可以接收了.

  2. 例子:

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>

动态组件

  1. 概括: 使用一个is特性(属性),来指定组件
  2. 也就是我们可以动态的去改变is的值, 然后实现动态的显示不同的组件
  3. 例子:
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

解析DOM模版时的注意事项

  1. 在HTML标准中,有些元素是固定的嵌套的, 例如ul>li, ol>li,table, select, 假如要在这些标签内使用组件,就需要使用is来指定组件,不然就会报错.

  2. 例子:

<!-- 报错 -->
<table>
<blog-post-row></blog-post-row>
</table>
<!-- 正确 -->
<table>
<tr is="blog-post-row"></tr>
</table>

Vue学习计划基础笔记(六) - 组件基础的更多相关文章

  1. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  2. vue学习指南:第六篇(详细) - Vue的组件 component

    1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...

  3. Python基础(六) 基础文件操作

    今天学习python下对文件的基础操作,主要从open函数.File对象的属性.文件定位.简单操作.举例说明几个步骤开始学习,下面开始进入今天的主题: 一.open函数介绍 open函数主要是打开一个 ...

  4. Vue学习之全局和私有组件小结(七)

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

  5. vue学习-day03(动画,组件)

    目录: 1.品牌列表-从数据库获取列表    2.品牌列表-完成添加功能    3.品牌列表-完成删除功能    4.品牌列表-全局配置数据接口的根域名    5.品牌列表-全局配置emulateJS ...

  6. Vue学习(2)---v-指令和组件

    Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...

  7. Vue学习计划基础笔记(一) - vue实例

    最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...

  8. Vue学习计划基础笔记(四) - 事件处理

    事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...

  9. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

随机推荐

  1. 面试 : C语言 功底 被 鄙视了

    第一道:被鄙视 的 C语言语法问题 请看 下面 程序 : 错误程序: void GetMemory( char *p ){ p = (char *) malloc( 100 );}void Test( ...

  2. 字符型设备驱动程序-first-printf以及点亮LED灯(四)

    怎么样 把 写的 代码 和 编译 放到  开发板上 去执行? 2017年5月22日16:34:13 需要 自己 编译 Linux 内核.. 需要 以下 几个 条件: 1.正常运行 Linux 的 开发 ...

  3. c#中的结构

    1.在c#中,结构是值类型的数据结构,它可以使用一个单一的变量存储各种数据类型的相关数据,使用Struct关键字进行声明. 2.C#中结构的特点: (1)结构中可以有字段,属性,方法,运算表达式,事件 ...

  4. redis 安装 配置 及启动

    linux下安装redis及其中遇到的问题的解决方法1.将下载好的压缩包放到/usr/local目录下# tar xzf redis-3.0.2.tar.gz# cd redis-3.0.2# mak ...

  5. MySQL----navicat for mysql(破解版)可视化数据库操作

    本博文介绍破解版navicat for mysql的安装方法及常用操作 navicat for mysql是一个专业的MySQL数据库图形化界面工具. 百度云下载地址:https://pan.baid ...

  6. chrome浏览器页面获取绑定返回顶部动画事件插件

    在chrome浏览器下页面加载: var top = $("body").scrollTop()  ; console.log(top)                      ...

  7. thinkphp5查询表达式IN使用小计

    根据多个id批量更新指定字段值 $map[] = ['id','in', input('post.id/a')]; $result = db('picture')->where($map)-&g ...

  8. Docker Toolbox下配置国内镜像源-阿里云加速器

    Docker machine安装 Docker Machine是一个简化Docker安装的命令行工具,通过一个简单的命令行即可在相应的平台上安装Docker,比如VirtualBox. Digital ...

  9. 加法变乘法——第六届蓝桥杯C语言B组(省赛)第六题

    原创 加法变乘法 我们都知道:1+2+3+ ... + 49 = 1225现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如:1+2+3+...+10*11+12+...+27*28+ ...

  10. (数据科学学习手札52)pandas中的ExcelWriter和ExcelFile

    一.简介 pandas中的ExcelFile()和ExcelWriter(),是pandas中对excel表格文件进行读写相关操作非常方便快捷的类,尤其是在对含有多个sheet的excel文件进行操控 ...