一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

二、组件用法

组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。

2.1 全局注册后,任何V ue 实例都可以使用。如:

  1. <div id="app1">
  2. <my-component></my-component>
  3. </div>
  1. Vue.component('my-component',{
  2. template: '<div>这里是组件的内容</div>'
  3. });
  4.  
  5. var app1 = new Vue({
  6. el: '#app1'
  7. });

要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<div></ div >”是无法渲染的。(而且最外层只能有一个根的<div>标签)

2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

  1. <div id="app2">
  2. <my-component1></my-component1>
  3. </div>
  1. var app2 = new Vue({
  2. el: '#app2',
  3. components:{
  4. 'my-component1': {
  5. template: '<div>这里是局部注册组件的内容</div>'
  6. }
  7. }
  8. });

2.3 data必须是函数

除了template选项外,组件中还可以像Vue实例那样使用其他的选项,比如data 、computed 、methods等。但是在使用data时,和实例稍有区别, data 必须是函数,然后将数据return 出去。

  1. <div id="app3">
  2. <my-component3></my-component3>
  3. </div>
  1. Vue.component('my-component3',{
  2. template: '<div>{{message}}</div>',
  3. data: function(){
  4. return {
  5. message: '组件内容'
  6. }
  7. }
  8. });
  9. var app3 = new Vue({
  10. el: '#app3'
  11. });

一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。

vue组件详解(一)——组件与复用的更多相关文章

  1. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  2. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  3. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  4. Android中Intent组件详解

    Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...

  5. Android笔记——四大组件详解与总结

     android四大组件分别为activity.service.content provider.broadcast receiver. ------------------------------- ...

  6. Echars 6大公共组件详解

    Echars 六大组件详解 : title  tooltip toolbox legend  dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...

  7. Unity Jobsystem 详解实体组件系统ECS

    原文摘选自Unity Jobsystem 详解实体组件系统ECS 简介 随着ECS的加入,Unity基本上改变了软件开发方面的大部分方法.ECS的加入预示着OOP方法的结束.随着实体组件系统ECS的到 ...

  8. [转]详解C#组件开发的来龙去脉

    C#组件开发首先要了解组件的功能,以及组件为什么会存在.在Visual Studio .NET环境下,将会有新形式的C#组件开发. 组件的功能 微软即将发布的 Visual Studio .NET 将 ...

  9. admin组件详解

    admin组件详解 先根据admin组件启动流程复习下django项目启动至请求过来发生的事 1将admin组件注册进app 2django项目启动 3在运行到定制的admin时执行其下面的apps文 ...

  10. OpenStack各组件详解和通信流程

    一.openstack由来 openstack最早由美国国家航空航天局NASA研发的Nova和Rackspace研发的swift组成.后来以apache许可证授权,旨在为公共及私有云平台建设.open ...

随机推荐

  1. linux centos 7.5 安装mysql5.7

    1 下载tar包,这里使用wget从官网下载(注:下载地址随时可能有变动,wget命令默认下载目录为当前所在文件夹) wget https://dev.mysql.com/get/Downloads/ ...

  2. 【转】SQL SERVER 2005/2008 中关于架构的理解

    在一次的实际工作中碰到以下情况,在 SQL SERVER 2008中,新建了一个新用户去访问几张由其他用户创建的表,但是无法进行查询,提示“对象名'CustomEntry' 无效.”.当带上了架构名称 ...

  3. vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...

  4. 推荐网站 explainshell.com

    ls 显示指定目录下的文件和目录,默认为当前目录. -a 显示所有文件及目录 (ls内定将文件名或目录名称开头为"."的视为隐藏档,不会列出) -l 除文件名称外,亦将文件型态.权 ...

  5. SQL Serever学习6——数据表

    数据表 表的构成 数据库中的基本表由记录(行)和字段(列)构成,SQLServer2008每个表可以有1024个列,每个列可以有8060字节(不包括iamge,ntext,text类型). 记录(Re ...

  6. Jquery Ajax 复杂json对象提交到WebService

    在ajax的已不请求中,常常返回json对象.可以利用json.net给我们提供的api达到快速开发. 例子: using System;using System.Collections;using ...

  7. LINQ-let子句、join子句

    1.Let子句 let子句用于在LINQ表达式中存储子表达式的计算结果,既let子句创建一个范围变量来存储结果,变量被创建后,不能修改或把其他表达式的结果重新赋值给它.此范围变量可以在后续的LINQ中 ...

  8. android ConstraintLayout布局

    解析ConstraintLayout的性能优势 Android新特性介绍,ConstraintLayout完全解析 1.子控件的位置约束属性: layout_constraintRight_toLef ...

  9. mysql:名次排名 (并列与不并列)

    http://www.cnblogs.com/zengguowang/p/5541431.html sql语句查询排名 思路:有点类似循环里面的自增一样,设置一个变量并赋予初始值,循环一次自增加1,从 ...

  10. js 数组常用的一些方法

    数组可以说是js经常会遇到的数据结构,以下我们对数组进行详细的学习! 一.数组的创建 var mycars = new Array(): || new Array(3);  || new Array( ...