组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

注册一个全局组件语法格式如下：

  1. Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

  1. <tagName></tagName>

全局组件

所有实例都能用全局组件。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <runoob></runoob>
  11. </div>
  12.  
  13. <script>
  14. // 注册
  15. Vue.component('runoob', {
  16.   template: '<h1>自定义组件!</h1>'
  17. })
  18. // 创建根实例
  19. new Vue({
  20.   el: '#app'
  21. })
  22. </script>
  23. </body>
  24. </html>

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

  1. <div id="app">
  2.     <runoob></runoob>
  3. </div>
  4.  
  5. <script>
  6. var Child = {
  7.   template: '<h1>自定义组件!</h1>'
  8. }
  9.  
  10. // 创建根实例
  11. new Vue({
  12.   el: '#app',
  13.   components: {
  14.     // <runoob> 将只在父模板可用
  15.     'runoob': Child
  16.   }
  17. })
  18. </script>

Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

  1. <div id="app">
  2.     <child message="hello!"></child>
  3. </div>
  4.  
  5. <script>
  6. // 注册
  7. Vue.component('child', {
  8.   // 声明 props
  9.   props: ['message'],
  10.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
  11.   template: '<span>{{ message }}</span>'
  12. })
  13. // 创建根实例
  14. new Vue({
  15.   el: '#app'
  16. })
  17. </script>

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

  1. <div id="app">
  2.     <div>
  3.       <input v-model="parentMsg">
  4.       <br>
  5.       <child v-bind:message="parentMsg"></child>
  6.     </div>
  7. </div>
  8.  
  9. <script>
  10. // 注册
  11. Vue.component('child', {
  12.   // 声明 props
  13.   props: ['message'],
  14.   // 同样也可以在 vm 实例中像 "this.message" 这样使用
  15.   template: '<span>{{ message }}</span>'
  16. })
  17. // 创建根实例
  18. new Vue({
  19.   el: '#app',
  20.   data: {
  21.     parentMsg: '父组件内容'
  22.   }
  23. })
  24. </script>

　以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

  1. <div id="app">
  2.     <ol>
  3.     <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
  4.       </ol>
  5. </div>
  6.  
  7. <script>
  8. Vue.component('todo-item', {
  9.   props: ['todo'],
  10.   template: '<li>{{ todo.text }}</li>'
  11. })
  12. new Vue({
  13.   el: '#app',
  14.   data: {
  15.     sites: [
  16.       { text: 'Runoob' },
  17.       { text: 'Google' },
  18.       { text: 'Taobao' }
  19.     ]
  20.   }
  21. })
  22. </script>

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

13.Vue.js 组件的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  4. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. 一个简单的Vue.js组件开发示例

    //创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

随机推荐

  1. Excel - java

    package com.e6soft.project.ExcelUtil; import java.io.BufferedInputStream; import java.io.File; impor ...

  2. Java设计模式之（二）——工厂模式

    1.什么是工厂模式 Define an interface for creating an object,but let subclasses decide which class toinstant ...

  3. Java将增加虚拟线程，挑战Go协程

    我们知道 Go 语言最大亮点之一就是原生支持并发,这得益于 Go 语言的协程机制.一个 go 语句就可以发起一个协程 (goroutin).协程本质上是一种用户态线程,它不需要操作系统来进行调度,而是 ...

  4. FastAPI 学习之路（六十一）使用mysql数据库替换sqlite数据库

    我们首先需要安装对应的连接的依赖 pip install pymysql 然后在配置testDatabase.py from sqlalchemy import create_engine from ...

  5. [hdu7076]ZYB's kingdom

    不难发现,操作1可以看作如下操作:对于删去$a_{1},a_{2},...,a_{k}$后的每一个连通块(的点集)$V$,令$\forall x\in V,x$的收益加上$s$(其中$s=\sum_{ ...

  6. [luogu7116]微信步数

    先判定无解,当且仅当存在一个位置使得移动$n$步后没有结束且仍在原地 暴力枚举移动的步数,记$S_{i}$为移动$i$步(后)未离开范围的点个数,则恰好移动$i$步的人数为$S_{i-1}-S_{i} ...

  7. [atAGC001F]Wide Swap

    结论:排列$p'_{i}$可以通过排列$p_{i}$得到当且仅当$\forall 1\le i<j<i+k,(p_{i}-p_{j})(p'_{i}-p'_{j})>0$ 证明:构造 ...

  8. 解决fatal: unable to access '': Failed to connect to 127.0.0.1 port 1181: Connection refused的问题

    今天把项目提交的git远程的时候遇到一个问题 fatal: unable to access '': Failed to connect to 127.0.0.1 port 1181: Connect ...

  9. React-native键盘遮挡输入框问题的解决

    2016年10月25日更新: 现在有一个更准确一点的做法是用一个View包裹住TextInput,然后通过该View的onLayout方法获取该输入框的y轴位置,再减去一个适当的高度去处理scroll ...

  10. LearnPython_week4

    1.装饰器2.生成器3.迭代器4.内置方法5.可序列化6.项目规范化 1.装饰器 # -*- coding:utf-8 -*- # Author:Wong Du ### 原代码 def home(): ...