Vue.js学习使用心得（四）——组件
一、组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
例注册一个全局组件：
js代码：
Vue.component(tagName, options) ——————tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
html代码：
<tagName></tagName>
（一）全局组件
<body>
<div id="app">
<aa></aa>
</div> <script>
// 注册
Vue.component('aa', {
template: '<h1>糖果波自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
（二）局部组件
<body>
<div id="app">
<aa></aa>
</div> <script>
var Child = {
template: '<h1>糖果波自定义组件!</h1>'
} // 创建根实例
new Vue({
el: '#app',
components: {
// <aa> 将只在父模板可用
'aa': Child
}
})
</script>
</body>
（三）Prop
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。详细使用方式如下：
<div id="app">
<child message="hello!"></child>
</div> <script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
（四）动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div> <script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div> <script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
（五）Prop 验证
组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时，它包含验证要求：
Vue.component('example', {
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
type 也可以是一个自定义构造器，使用 instanceof 检测。
Vue.js学习使用心得（四）——组件的更多相关文章
- Vue.js学习使用心得（一）
一.初步了解 Vue.js是一套构建用户界面的渐进式框架,它只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,相当于JavaS ...
- Vue.js学习使用心得（二）——自定义指令
自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...
- Vue.js学习使用心得（三）
一.计算属性 计算属性关键词: computed <body> <div id="app"> <p>原始字符串: {{ message }}&l ...
- Vue.js学习笔记 第四篇 列表渲染
遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...
- 用vue.js学习es6（四）：Symbol类型
一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...
- Vue.js学习-组件注册与使用
Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...
- Vue.js 学习笔记之七：使用现有组件
5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
随机推荐
- onchange 事件
Event 对象 定义和用法 onchange 事件会在域的内容改变时发生. 语法 onchange="SomeJavaScriptCode" 参数 描述 SomeJavaScri ...
- CSS的再深入5（更新中···）
页面布局 结构层:搭我们的页面框架. 布局层:针对框架内部结构进行排版. 不需要使用浮动解决的问题尽量不用. 使用浮动之后会使该元素脱标,并且该元素的margin. div 盒子模型 : 就是一个容器 ...
- python from entry to abandon2
学习Linux已经有大致两周了,依然感觉到自己仍然在运维的大门外徘徊.于是我想要找到一个在Linux之外的业余方向,可以以作为枯燥基础学习的调节.没过多久我就发现了Python可以说是钦定的选择,它作 ...
- No executable found matching command "dotnet-aspnet-codegenerator"
vs2017,mvc新建控制器报错. 右键项目,选择编辑工程文件(.csproj),加入以下节点 <ItemGroup> <DotNetCliToolReference Includ ...
- C# 绘制圆角矩形
Graphics g = e.Graphics; // 圆角半径 ; // 要实现 圆角化的 矩形 Rectangle rect = , , panel4.Width - cRadius, panel ...
- [大数据从入门到放弃系列教程]第一个spark分析程序
[大数据从入门到放弃系列教程]第一个spark分析程序 原文链接:http://www.cnblogs.com/blog5277/p/8580007.html 原文作者:博客园--曲高终和寡 **** ...
- DateHelper
public static class DateHelp { /// <summary> /// 获取当前日期是该月的第几周 /// </summary> /// <pa ...
- spark streaming将处理结果存入mysql中（使用c3p0连接池）
1.c3p0相应的架包导入工程中 将以下四个架包导入工程, 主要有三个架包:c3p0-0.9.5.2.jar c3p0-oracle-thin-extras-0.9.5.2.jar mchange-c ...
- HTTP协议（二）之确保web安全的HTTPS
一.概述 https并非是应用层的一种新协议.只是HTTP通信接口部分用SSL和TLS协议替代. 通常,HTTP直接和TCP通信.当使用SSL时,则演变成先和SSL通信,再由SSL和TCP通信了. 简 ...
- 2018-icpc沈阳-G-思维
http://codeforces.com/gym/101955/problem/G 给出一个6000*6000的坐标系,有四种操作,一是加入放置一个点到某个空格子上,二是从某个有点的格子移走一个点, ...