13.Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
全局组件
所有实例都能用全局组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div> <script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>
局部组件
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<div id="app">
<runoob></runoob>
</div> <script>
var Child = {
template: '<h1>自定义组件!</h1>'
} // 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>
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>
以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：
<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 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
13.Vue.js 组件的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- 一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
随机推荐
- Part 35 AngularJS caseInsensitiveMatch and Inline Templates
In this video we will discuss 2 simple but useful features in Angular caseInsensitiveMatch Inline Te ...
- SpringBoot Actuator — 埋点和监控
项目中看到了有埋点监控.报表.日志分析,有点兴趣想慢慢捣鼓一下 1. 数据埋点 监控机器环境的性能和业务流程或逻辑等各项数据,并根据这些数据生成对应的指标,那么我们就称为数据埋点.比如我们想知道某个接 ...
- HTTP 缓存终极指南
TL;DR 错误的缓存策略是如何抵消你所做的性能优化工作的. 缓存存在于客户端并且通过chrome或者其他抓包工具查看其状态信息. 客户端通过header中的各个字段做缓存的过期判断. 代理服务器上也 ...
- Hi3516开发笔记（二）：Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
前言 搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑. 虚拟机 开发本对虚拟机做了一些基本要求,如下图: 其实重 ...
- Android系统编程入门系列之硬件交互——传感器
到目前为止,关于应用程序与用户之间的相关内容便比较肤浅的大致介绍完毕.而在整个系统架构中,应用程序与用户之间的交互,犹如参天大树上的枝干和树叶,交互起来五彩缤纷,但使整个生态系统保持生命力的核心,在于 ...
- [atARC099E]Independence
考虑这张图的反图,相当于这两个集合内部没有边,这也就是二分图的限制 换言之,我们要将这张图黑白染色(不能则为-1),$x$即为某种颜色的数个数 对于一个联通块,记连通块大小为$sz$,则白色点个数为$ ...
- [luogu5426]Balancing Inversions
由于交换是相邻交换,所以分为两类:1.左右区间内部交换,那么一定会让逆序对数量$\pm 1$,也就是说如果没有左右区间之间交换,那么答案就是$|ansL-ansR|$(ans表示逆序对数量)2.左右区 ...
- Codeforces 1411G - No Game No Life（博弈论+生成函数+FWTxor）
Codeforces 题面传送门 & 洛谷题面传送门 一道肥肠套路的题目. 首先这题涉及博弈论.注意到这里每一个棋子的移动方式都是独立的,因此可以考虑 SG 定理.具体来说,我们先求出每个棋子 ...
- Apollo配置中心中的Namespace
前言:Apollo(阿波罗)是携程研发的开源配置管理中心,能够集中管理应用不同环境.不同集群的配置.同一环境统一集群的配置下有namespace概念,具体信息官方文档如下: namespace是配置项 ...
- doxygen文件配置
主要配置修改 整个程序配置分几个部分 Project related configuration options 项目相关,包括: 项目名 输出目录 输出语言 是否显示继承属性 是否对C.Java.F ...