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 ...
随机推荐
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- python链接Hive
之前一直用thrift链接Hive,但在运行时总出现问题,一直报缺少模块的错误,装了这个模块,又报缺少那个模块,连了半天,全是泪啊! 原来thrift链接Hive的.py文件后续没人维护,是连不上的. ...
- vue进行文件下载
本文为博主原创,未经允许不得转载: 总结一下,最近在vue中实现一个文件下载的功能,用了vue中ajax的方式请求下载接口, 但是返回报错,在网上查询之后,找到用ajax请求下载文件报错的原因:aja ...
- Springboot解决war包放到Tomcat服务器上404的特殊情况
Springboot解决war包放到Tomcat服务器上404的特殊情况 原文链接:https://www.cnblogs.com/blog5277/p/9330577.html 原文作者:博客园-- ...
- loadrunner中web_reg_save_param和web_reg_save_param_ex的区别
在使用Loadrunner进行性能测试,编写接口请求脚本时,通过会用到关联函数,而web_reg_save_param和web_reg_save_param_ex的函数有什么区别呢?以下为总结的两点, ...
- 【文献07】基于MPC的WMR点镇定-极坐标系下和轨迹跟踪
参考: Kuhne F , Lages W , Silva J D . Point stabilization of mobile robots with nonlinear model predic ...
- Python3编译安装以及创建虚拟运行环境
一.yum安装pip# yum -y install epel-release #Centos6.8安装epel源# yum -y install python-pip手动安装pip# wget ...
- MongoDB一键安装
#!/bin/bash export lang=Cecho '#1.关闭本地的MongoDB'#service mongodb stopecho '#2.清空本地MongoDB的安装文件'rm -rf ...
- Linux 安装 ffmpeg
在安装ffmpeg之前,需要先安装一些必需组件.包括但不限于以下组件(有的系统里面可能已经安装过) 首先在根目录下创建:ffmpeg_sources 1.Yasm sudo apt-get insta ...
- ID基本操作（出血的定义）（置入图片）（添加页面）5.15
出血区域就是会被裁掉的部分.防止打印出来裁剪出一个百边.查看文档的几种模式: 在一个文档里CTRL+C复制,CTRL+V粘贴.可在光标位置置入文本框架. 2.用文字工具在文本中单击,为了确定光标位置, ...