组件（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. java eclipse调试提示Source not found 或 一闪而过 解决方法

    Web工程Eclipse  debug方式启动,在断点的位置被成功拦截,但是没有跳转到工程的代码处,提示如下: 当然这个时候如果我继续按F5的话呢,程序又会接着正常运行了.到这里那就是说程序本身是没有 ...

  2. 【ASP.NET Core】体验一下 Mini Web API

    在上一篇水文中,老周给大伙伴们简单演示了通过 Socket 编程的方式控制 MPD (在树莓派上).按照计划,老周还想给大伙伴们演示一下使用 Web API 来封装对 MPD 控制.思路很 Easy, ...

  3. sui Mobile 试玩

    .... 突然就用上这东西还不熟悉就写了一个页面而已 <a class="open-popup button pull-right create-actions" id=&q ...

  4. [atARC125F]Tree Degree Subset Sum

    令$a_{i}$为$i$的度数-1,那么$(x,s)$合法即等价于存在$S\subseteq [1,n],|S|=x$且$\sum_{k\in S}a_{k}=s$ 引理:$(x,s)$合法的必要条件 ...

  5. 第03章_基本的SELECT语句

    第03章_基本的SELECT语句 1. SQL概述 1.1 SQL背景知识 1946 年,世界上第一台电脑诞生,如今,借由这台电脑发展起来的互联网已经自成江湖.在这几十年里,无数的技术.产业在这片江湖 ...

  6. （前端）面试300问之（3）this的指向判断

    一.this的相关理解与解读 1.各角度看this. 1)ECMAScript规范: this 关键字执行为当前执行环境的 ThisBinding. 2)MDN: In most cases, the ...

  7. [ Skill ] 图形化组件在注册 User Trigger 时需要注意的事情

    https://www.cnblogs.com/yeungchie/ 使用 deRegUserTriggers 可以用来配置:当打开一个新窗口时,自动集成自定义的菜单.工具栏等等. 使用格式如下: d ...

  8. CF1610F F. Mashtali: a Space Oddysey

    我们首先发现有如下性质: 我们不妨先随机定向边,那么我们发现无论我们如何翻转边. 都会对其两端的点,造成 \(2 / 4\) 的影响,所以我们发现如果一个点其和他相连的所有边权和为偶数,则我们不能调整 ...

  9. 【R绘图】R 基础（base ）低级函数legend绘图？

    ggplot虽然好用,但base才是真正的瑞士军刀,什么都能用,各种自定义图形自由组合,出版级图片用base才是王道.但要达到随心所欲,需要熟练掌握. legend是比较重要的低级函数,有很多细节处理 ...

  10. 【基因组注释】同源注释比对软件tblastn、gamp和exonerate比较

    基因结构预测中同源注释策略,将mRNA.cDNA.蛋白.EST等序列比对到组装的基因组中,在文章中通常使用以下比对软件: tblastn gamp exonerate blat 根据我的实测,以上软件 ...