组件（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 组件的更多相关文章

  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. es聚合查询语法

    {    "size": 0,    "query": {        "bool": {            "filter ...

  2. 安装spark 后 NoClassDefFoundError

    安装spark后,hive报 java.lang.NoClassDefFoundError: org/apache/hadoop/mapreduce/InputFormat trace 看是sqoop ...

  3. 18-Spring Cloud Alibaba Nacos

    简介 为什么叫Nacos 前四个字母分别为Naming和Configuration的前两个字母,最后的s为Service Nacos是什么 一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平 ...

  4. Django笔记&教程 6-1 表单（Form）介绍

    Django 自学笔记兼学习教程第6章第1节--表单(Form)介绍 点击查看教程总目录 1 介绍 如果网站要让用户输入并提交数据(比如注册登录),则需要用到表单. 单纯的html也能写出表单,格式一 ...

  5. 关于linux系统密码策略的设置

    由于工作需要最近需要将公司的多台linux服务器进行密码策略的设置,主要内容是增加密码复杂度. 操作步骤如下,不会的同学可以参考: 操作前需要掌握如下几个简单的知识点:(其实不掌握也行,不过学学没坏处 ...

  6. Spring Cloud Gateway自定义过滤器实战(观测断路器状态变化)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  7. [atARC077F]SS

    (以下字符串下标从0开始,并定义$2s=s+s$) 考虑$f(S)$,即令$l=\max_{2i<|S|且S[0,i)=S[|S|-i,|S|)]}i$,则$f(S)=S+S[l,|S|-l)$ ...

  8. Apache ZooKeeper原理剖析及分布式理论名企高频面试v3.7.0

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com 定义 Apache ZooKeeper官网 https://zookeeper.apache.org/ 最新版本3.7.0 ...

  9. 藏书馆App基于Rainbond实现云原生DevOps的实践

    我们需要的不是精通Kubernetes的工程师,我们需要一款小白都能用好的管理工具. -- 厦门正观易知科技有限公司运维负责人 郭传壕 大家好,我是厦门正观易知科技有限公司运维负责人郭传壕. 藏书馆是 ...

  10. Codeforces 1340F - Nastya and CBS（分块+哈希）

    Codeforces 题面传送门 & 洛谷题面传送门 首先看到这样的数据范围我们可以考虑分块,具体来说,对于每一块我们记录其中的括号是否能完全消掉,以及对其进行括号相消之后的括号序列(显然是一 ...