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 ...
随机推荐
- Java虚拟机内存分配详解
简介 了解Java虚拟机内存分布的好处 1.了解Java内存管理的细节,有助于程序员编写出性能更好的程序.比如,在新的线程创建时,JVM会为每个线程创建一个专属的栈 (stack),其栈是先进后出的数 ...
- Guitar Pro里自动化编辑器有什么用？如何使用？
我们在使用操作Guitar Pro来进行吉他学习创作时,会遇到下面几个问题.当我们想要改变全部小节或者某一特定小节的拍速时,就会在想,有没有什么简便工具来实现我们的想法呢?告诉大家,Guitar Pr ...
- Robot Framework安装及配置
Robot Framework安装及配置 需要按照的软件有Python.WxPython.robot framework.robotframework-ride.robotframework-sele ...
- Git，Github和Gitlab简介和使用方法
什么是Git Git是一个版本控制系统(Version Control System,VCS). 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 多年前,我在法国做第一 ...
- 四:DRF项目开发的准备
一: 虚拟环境virtualenv 如果在一台电脑上, 想开发多个不同的项目, 需要用到同一个包的不同版本, 如果使用上面的命令, 在同一个目录下安装或者更新, 新版本会覆盖以前的版本, 其它的项目就 ...
- 使用Jekins自动构建项目（GitLab+Java Maven）
1. 登录Jekins 前提: Jekins 已经部署完成并能登录版本:Jenkins2.60.2 http://IP:端口/jenkins/view/all/newJob 2. 新建构建任务 选择项 ...
- POJ-3294 Life Forms n个字符串中出现超过n/2次的最长子串（按字典序依次输出）
按照以前两个字符串找两者的最长公共子串的思路类似,可以把所有串拼接到一起,这里为了避免讨论LCP跨越多个串需需要特别处理的问题用不同的字符把所有串隔开(因为char只有128位,和可能不够用,更推荐设 ...
- Windows下安装python的scipy等科学计算包（转）
如果要使用python进行科学计算.数据分析等,一定要安装scipy.seaborn.numpy等等包. 但Windows下安装python的第三方库经常会出现问题.此前,已介绍过Windows下如何 ...
- 7.3 GRASP原则三: 低耦合 Low Coupling
3.GRASP原则三: 低耦合 Low Coupling How to support low dependency, low change impact and increased reuse? ...
- 使用pca/lda降维
PCA主成分分析 import numpy as np import pandas as pd import matplotlib.pyplot as plt # 用鸢尾花数据集 展示 降维的效果 f ...