深入了解Vue.js组件笔记
1、组件注册
Vue.component('name',{}) 创建的组件都是全局组件,它们在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。第一个参数是组件的名字,第二个参数是一个方法,可以在其中定义组件的data数据、template模板、props传值、components组件注册、computed计算属性、method方法、watch监听数据变化、以及生命周期的构子函数:beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推荐创建一个 components 目录,并将每个组件放置在其各自的文件中:
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
}
}
2、Prop
由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象,当prop是对象时,即使对象是静态的也必须使用v-bind。不要在子组件中改变prop的数据,可以在自身的data里保存一份该prop属性
Vue.component('user', {
props: ['sayHello']
})
<user say-Hello="hello!"></user>
我们可以传递静态Prop(如上),也可以使用v-bind传递动态Prop(如下)
<user :title="post.title"></user>prop验证(控制传入组件数据的类型)
Vue.component('mycomponent',{
props:{
propZ:null, //匹配任何类型
propA:Number, //数字类型
propB:[Number,String], //多个可能的类型
propC:{
type:String,
required:true, //必填
default:'Hello' //默认
},
propD:{
type:Object, //对象类型
default:function(){ //默认函数
return {
msg:'hello'
}
}
},
propE:{
//自定义验证
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
user:Person
}
})
3、自定义事件
1、事件名建议始终使用短横线连接的方式如:my-event
2、自定义组件的 v-model:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>
4、插槽<slot>
1、组件:<base-layout>:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name='footer'></slot>
</footer>
<slot name="footer"></slot>
</div>
<base-layout>
<template slot='header'>
<h3>我是Header</h3>
</template>
<p>我没有名字</p>
<p>显示在默认插槽</p>
<h3 slot='footer'>具名插槽2</h3>
</base-layout>
结果:
<div class="container">
<header>
<h3>我是Header</h3>
</header>
<main>
<p>我没有名字</p>
<p>显示在默认插槽</p>
</main>
<footer>
<h3>具名插槽2</h3>
</footer>
</div>
5、动态组件与异步组件
<!-- 失活的组件将会被缓存!-->
<keep-alive> //<keep-alive>缓存组件切换状态,组件必须有名字
<component v-bind:is="currentTabComponent"></component> //is 特性来切换不同的组件
</keep-alive>
来源:https://segmentfault.com/a/1190000016354966
深入了解Vue.js组件笔记的更多相关文章
- Vue.js 组件笔记
Vue 组件总结笔记 一. 创建组件 1. 使用组件三部曲 ( 创建, 注册, 使用 ) 2. 全局组件:Vue.component('tag', {}); 3. 局部组件: components 属 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用
本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
随机推荐
- java基本数据类型总结 类型转换 final关键字的用法
java基本数据类型总结 Java数据类型总结 数据类型在计算机语言里面,是对内存位置的一个抽象表达方式,可以理解为针对内存的一种抽象的表达方式.接触每种语言的时候,都会存在数据类型的认识,有复杂的. ...
- 使用tess4j完成身份证和营业执照图片的文字识别
这两天研究了一下关于OCR图文解析的技术.当然市场上已经有开源服务,比如百度的AI开放平台,就有OCR相关的API接口.我这里选用的是Tesseract开源框架,java封装版本是tess4j.结合网 ...
- App 自动化,Appium 凭什么使用 UiAutomator2?
1. UiAutomator2 是什么 可能很多人对 UiAutomator2 和 UiAutomator 傻傻分不清楚 UiAutomator 是 Google 开发的一款运行在 Android 设 ...
- 光年数据分析表(seo数据监控表和爬虫数据监控表)
http://www.wocaoseo.com/thread-307-1-1.html 光年seo培训想必很多人都知道,他们提出的数据化操作影响了很多的seo从业者,下面是他们的2个数据表,搜集于网络 ...
- ES6--let,解构赋值,promise && ES7--async
ES-->IE10.Google.火狐 ES6 let 声明的关键字 不能重复声明 块级作用域 <input type="button" value="1&q ...
- oeasy教您玩转linux010105详细手册man
详细手册 回忆上节课 我们上节课学习了使用命令来了解命令 whatis 我们通过他来发出灵魂之问 whatis到底是干什么的?
- VMware安装Centos7 -九五小庞
VMware安装Centos7超详细过程(图文) https://blog.csdn.net/babyxue/article/details/80970526 安装centos7的时候 启动会提示Pl ...
- IOException的子类
ChangedCharSetException, CharacterCodingException, CharConversionException, ClosedChannelException, ...
- 将大量数据批量插入Oracle表的类,支持停止续传
之前用create table select * from XXTable无疑是创建庞大表的最快方案之一,但是数据重复率是个问题,且数据难以操控. 于是我在之前批量插数据的基础上更新了一个类,让它具有 ...
- Nginx 路由--Location的使用
一. 路由--Location的使用 9.1. Location语法规则 语法规则: location [=|~|~*|^~] /uri/ {… } 首先匹配 =,其次匹配^~,其次是按文件中顺序的正 ...