vue笔记三(组件)
十.组件
1.组件中的data为函数
2.props: 父组件向子组件传递数据
子组件:
Child.vue
<template>
<span>{{ myMsg }}</span>
</template> <script>
export default {
props: ['myMsg'],
data () {
return { }
}
}
</script>
父组件:
<template>
<div id="app">
<child :my-msg="msg"></child>
</div>
</template> <script>
import Child from '@/components/Child'
export default {
name: 'app',
components: {Child},
data () {
return {
msg: 'ok'
}
}
}
</script>
3.字面量语法和动态语法:
<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
如果你想要传递的是一个数字,你应该这么做
<!-- 传递了一个字符串 "1" -->
<comp :some-prop="1"></comp>
4.prop验证:
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
type 可以是下面原生构造器:
String
Number
Boolean
Function
Object
Array
Symbol
5.非 prop 特性
所谓非 prop 特性,就是它可以直接传入组件,而不需要定义相应的 prop。如class,style等
6.子组件跟父组件的通信:
父组件使用 $on(eventName) 监听事件
子组件使用 $emit(eventName) 来触发事件
示例:
子组件:
<template>
<button @click="onClick">单击</button>
</template> <script>
export default {
methods: {
onClick () {
this.$emit('increment')
}
}
}
</script>
父组件:
<template>
<div id="app">
<span>{{ data }}</span>
<child v-on:increment="inCrementTotal"></child>
</div>
</template> <script>
import Child from '@/components/Child'
export default {
name: 'app',
components: {Child},
data () {
return {
data: 0
}
},
methods: {
inCrementTotal () {
this.data ++
}
}
}
</script>
7.绑定原生事件:
<my-component v-on:click.native="doTheThing"></my-component>
ps:这将触发my-component组件的click事件
8.修饰符 .sync
.sync双向绑定,从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。
示例:
子组件:
<template>
<button @click="onClick">单击</button>
</template> <script>
export default {
data () {
return {foo: 1}
},
methods: {
onClick () {
this.$emit('update:foo', 10)
}
}
}
</script>
父组件:
<template>
<div id="app">
<span>{{ data }}</span>
<child :foo.sync="data"></child>
</div>
</template> <script>
import Child from '@/components/Child'
export default {
name: 'app',
components: {Child},
data () {
return {
data: 0
}
}
}
</script>
9.自定义表单事件:
<input v-model="something">
相当于:
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
10.slot
子组件使用父组件传递过来的内容:
子组件:
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
父组件:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>
最终渲染:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>
11.命名solt
子组件:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件:
<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<p slot="footer">这里有一些联系信息</p>
</app-layout>
最终渲染:
<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>
12.作用域solt
子组件:
<div class="child">
<slot text="hello from child"></slot>
</div>
父组件:
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
最终结果:
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>
13.作用域solt列表组件
子组件:
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>
父组件:
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
14.动态组件:
通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
}) <component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变! -->
</component>
也可以直接绑定到对象上:
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
15.keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>
16.子组件索引ref
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
使用:
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
17.异步组件
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单,Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// Pass the component definition to the resolve callback
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
工厂函数接收一个 resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。
18.命名约定
当注册组件 (或者 props) 时,可以使用 kebab-case,camelCase,或 PascalCase;在html中应当使用kebab-case
19.内联模板
如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
20.对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once 将渲染结果缓存起来,就像这样:
Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})
vue笔记三(组件)的更多相关文章
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- 1、vue 笔记之 组件
1.组件个人理解: <组件>是页面的一部分,将界面切分成部分,每部分称为 <组件> 2.组件化思想: //2.1.定义一个全局的组件,组件支持‘驼峰命名 ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue:实践学习笔记(3)——组件使用
Vue:实践学习笔记(3)——组件使用 全局注册 1.注册组件 Vue.component('my-component',{ //选项 }) 说明:my-component就是注册的组件自定义的标签名 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- Vue学习计划基础笔记(六) - 组件基础
组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...
随机推荐
- 组合数问题(NOIP2016)
原题传送门 这题啊. 裸的杨辉三角. 预处理杨辉三角和答案即可 下面贴代码 #include<iostream> #include<cstdio> #include<al ...
- ftp服务器搭建(windows)+实现ftp图片上传对接
ftp服务器搭建(windows): vsftpd简介: vsftpd是“very secure FTP daemon”的缩写,是一个完全免费的.开放源代码的ftp服务器软件. 下载地址: http: ...
- PO-BO-VO-DTO-POJO-DAO
POJO,BO,VO的关系: 简单理解:http://www.blogjava.net/vip01/archive/2007/01/08/92430.html 全面:https://www.cnblo ...
- android.useDeprecatedNdk=true
android.useDeprecatedNdk=true ndk{ moduleName "aa" abiFilter "armeabi-v7a" }
- python 向mysql插入数据
生成随机内容用到的方法: substr是一个字符串函数,从第二个参数1,开始取字符,取到3 + floor(rand() * 75)结束 floor函数代表的是去尾法取整数. rand()函数代表的是 ...
- hdu 1102(最小生成树)
Constructing Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- Good Bye 2016 A. New Year and Hurry【贪心/做题目每道题花费时间按步长为5等差增长,求剩余时间够做几道题】
A. New Year and Hurry time limit per test 1 second memory limit per test 256 megabytes input standar ...
- 2018 JUST Programming Contest 1.0 题解
题目链接 gym101778 Problem A 转化成绝对值之后算一下概率.这个题有点像 2018 ZOJ Monthly March Problem D ? 不过那个题要难一些~ #includ ...
- Codeforces 1028E. Restore Array
题目直通车:http://codeforces.com/problemset/problem/1028/E 解法:设原数组为ar[],求ar中的最大值的下标ins,依次向前遍历一遍,每一个答案值都为前 ...
- sharepoint 2013 和 office web apps server 2013集成
环境: 三台服务器 系统:window 2008 R2server01: 192.168.10.162(office web app)server02: 192.168.10.163(AD)serv ...