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 ...
随机推荐
- 查看Git提交的代码统计
1,提交Top5: git log --pretty='%aN' | sort | uniq -c | sort -k1 -n -r | head -n 5 2,某用户提交的代码统计 git log ...
- IO流(一)
内容概要: Java以流的形式处理所有输入和输出.流是随通信路径从源移动到目的地的字节序列. 内存与存储设备之间传输数据的通道 流的分类: 按方向 输入流:将存储空间中的内容读到内存中 硬盘--& ...
- c++学习笔记7（面向对象的程序设计）
面向对象的程序=类+类+....+类 设计程序的过程,就是设计类的过程 实例 对象的内存分配 对象间的运算 使用类的成员变量和成员函数
- Mac Python相关配置操作汇总
以下总结一下我在安装pytorch时用到的一些命令及操作,方便以后回顾 一.Which xxxx 直接查找到xxxx所在的路径.如下: which python python: aliased to ...
- 菜鸡的Java笔记 国际化程序实现原理
国际化程序实现原理 Lnternationalization 1. Locale 类的使用 2.国家化程序的实现,资源读取 所谓的国际化的程序 ...
- [loj2135]幻想乡战略游戏
以1为根建树,令$D_{i}$为$i$子树内所有节点$d_{i}$之和 令$ans_{i}$为节点$i$的答案,令$fa$为$i$的父亲,则$ans_{i}=ans_{fa}+dis(i,fa)(D_ ...
- [cf516E]Drazil and His Happy Friends
令$d=\gcd(n,m)$,存在$x$和$y$使得$xn+i=ym+j$的充要条件是$i\equiv j(mod \ d)$,因此将$xd+i$(其中$0\le i<d$)作为一组,共有$d$ ...
- 【Tool】IntelliJ 搭建Node.js环境
IntelliJ IDEA 开发 Node.js 2019-07-29 14:12:34 by冲冲 1. 配置插件 在IDEA的 file -> setting -> Plugins, ...
- 【NOIP 2018】摆渡车
前情提要 是的 我终于回来补坑了 一年了哇 你这个鸽子王 斜率优化版本 今天在复习斜率优化的时候才想起来这个题 定义就不设了 大家想看可以看上面那个原版 怎么斜率优化呢? 我们考虑\(i\)点是当前的 ...
- 洛谷 P7879 -「SWTR-07」How to AK NOI?（后缀自动机+线段树维护矩乘）
洛谷题面传送门 orz 一发出题人(话说我 AC 这道题的时候,出题人好像就坐在我的右侧呢/cy/cy) 考虑一个很 naive 的 DP,\(dp_i\) 表示 \([l,i]\) 之间的字符串是否 ...