vue组件详解(一)——组件与复用
一、什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
二、组件用法
组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。
2.1 全局注册后,任何V ue 实例都可以使用。如:
<div id="app1">
<my-component></my-component>
</div>
Vue.component('my-component',{
template: '<div>这里是组件的内容</div>'
}); var app1 = new Vue({
el: '#app1'
});
要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了
template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<div></ div >”是无法渲染的。(而且最外层只能有一个根的<div>标签)
2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:
<div id="app2">
<my-component1></my-component1>
</div>
var app2 = new Vue({
el: '#app2',
components:{
'my-component1': {
template: '<div>这里是局部注册组件的内容</div>'
}
}
});
2.3 data必须是函数
除了template选项外,组件中还可以像Vue实例那样使用其他的选项,比如data 、computed 、methods等。但是在使用data时,和实例稍有区别, data 必须是函数,然后将数据return 出去。
<div id="app3">
<my-component3></my-component3>
</div>
Vue.component('my-component3',{
template: '<div>{{message}}</div>',
data: function(){
return {
message: '组件内容'
}
}
});
var app3 = new Vue({
el: '#app3'
});
一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。
所以一般给组件返回一个新的独立的data对象。
vue组件详解(一)——组件与复用的更多相关文章
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——组件详解之模板语法
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- Android中Intent组件详解
Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...
- Android笔记——四大组件详解与总结
android四大组件分别为activity.service.content provider.broadcast receiver. ------------------------------- ...
- Echars 6大公共组件详解
Echars 六大组件详解 : title tooltip toolbox legend dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...
- Unity Jobsystem 详解实体组件系统ECS
原文摘选自Unity Jobsystem 详解实体组件系统ECS 简介 随着ECS的加入,Unity基本上改变了软件开发方面的大部分方法.ECS的加入预示着OOP方法的结束.随着实体组件系统ECS的到 ...
- [转]详解C#组件开发的来龙去脉
C#组件开发首先要了解组件的功能,以及组件为什么会存在.在Visual Studio .NET环境下,将会有新形式的C#组件开发. 组件的功能 微软即将发布的 Visual Studio .NET 将 ...
- admin组件详解
admin组件详解 先根据admin组件启动流程复习下django项目启动至请求过来发生的事 1将admin组件注册进app 2django项目启动 3在运行到定制的admin时执行其下面的apps文 ...
- OpenStack各组件详解和通信流程
一.openstack由来 openstack最早由美国国家航空航天局NASA研发的Nova和Rackspace研发的swift组成.后来以apache许可证授权,旨在为公共及私有云平台建设.open ...
随机推荐
- %notfound的理解——oracle存储过程 .
文档中的解释:It returns TRUE if an INSERT, UPDATE, or DELETE statement affected no rows, or a SELECT INTO ...
- vue中$watch源码阅读笔记
项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...
- sql server数据库导出表里所有数据
主要步骤: 连接数据库>选择需要导出数据的数据库>任务>生成脚本 点击下一步,选择特定数据库对象>选择需要导出的数据表,下一步 选择高级>要编写脚本的数据的类型:仅限数据 ...
- 激活 IntelliJ IDEA
1.点击下面的链接下载 JetbrainsIdesCrack-4.2-release.jar 链接:https://pan.baidu.com/s/1eNY_bwxF7Efl4QG0yh6l1A 提 ...
- 怎么让一段xml被识别为字符串
public static String decodeString(String strData) { strData = replaceString(strData, "<" ...
- 启动Hadoop时候datanode没有启动的原因及解决方案
有时候我们start-dfs.sh启动了hadoop但是发现datanode进程不存在 一.原因 当我们使用hadoop namenode -format格式化namenode时,会在namenode ...
- XML文档的解析—dom4j
XML为可扩展标记语言,它主要是用来保存数据,做配置文件,数据传输载体等.其实就是一个后缀名为.xml的文件. XML命名规则 名称可以含字母.数字以及其他的字符 名称不能以数字或者标点符号开始 名称 ...
- spring boot2 使用log4j2
spring boot默认使用的是logback,看到好多地方说logback比log4j耗性能,具体么我也没试过,不过个人还是log4j用得更多. 先看pom依赖 <dependency> ...
- csharp:Conversion Between DataTable and List
/// <summary> /// http://www.codeproject.com/Tips/784090/Conversion-Between-DataTable-and-List ...
- 有标号的DAG计数系列问题
传送门 II 设 \(f_i\) 表示 \(i\) 个点的答案 那么枚举至少 \(j\) 个点的出度为 \(0\) \[\sum_{j=0}^{i}(-1)^j\binom{i}{j}f_{i-j}2 ...