Vue(八)---组件（Component）
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
1.全局组件：
所有实例都能用全局组件
<div id="app">
<aaa></aaa>
<aaa></aaa>
</div> <script>
Vue.component('aaa',{
template:'<h1>自定义组件!</h1>'
}) new Vue({
el:'#app'
})
</script>
2.局部组件：
在实例选项中注册局部组件，这样组件只能在这个实例中使用
<div id="app">
<cc></cc>
</div>
<script type="text/javascript">
var Child = {
template: '<h1>自定义组件!</h1>'
};
new Vue({
el:'#app',
components:{
'cc':Child
}
})
</script>
3.参数：props
传递参数给组件
<body>
<div id="app">
<aaa mess="abcd"></aaa>
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
props:['mess'],
template:'<h1>---{{mess}}----</h1>'
}) new Vue({
el:'#app'
})
</script>
</body>
4.动态参数
<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>
Vue(八)---组件（Component）的更多相关文章
- vue学习指南：第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释 1. 第一种解释: 什么是组件? 1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标 ...
- vue从入门到进阶：组件Component详解（六）
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- Vue教程：组件Component详解（六）
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- vue.js组件（component）
简介: 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面 ...
- Vue组件component创建及使用
组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...
- 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue学习之组件(component)(一)
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- Vue组件（35）动态组件 component 的 is 到底可以是啥？
component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- Redis | 使用redis存储对象反序列化异常SerializationFailedException
案例 使用Redis进行对象存储,在处理业务逻辑的时候,丛Redis获取对象发现反序列化失败,抛出如下异常: Caused by: org.springframework.data.redis.ser ...
- webpack--运行npm run dev自动打开浏览器运行首页的两种方式以及热加载
作为开发人员,我们在修改了代码之后,在vscode终端运行npm run dev指令后,希望它可以自动打开浏览器方便我们调试,有两种方式可以实现: 自动打开浏览器的两种方式: 方式一: 1.webpa ...
- SSH(一)
系统程序架构: 整合思路 1.逆依赖方向而行,由Spring提供对象管理和服务 2.依次实现Spring与Hibernate.Spring与Struts2的集成 配置 ...
- 快速理解YOLO目标检测
YOLO(You Only Look Once)论文 近些年,R-CNN等基于深度学习目标检测方法,大大提高了检测精度和检测速度. 例如在Pascal VOC数据集上Faster R-CNN的mAP达 ...
- JAVA编程学习之JAVA集合
一.JAVA集合类 为了保存数量不确定的数据,以及保存具有映射关系的数据(关联数组),java提供了集合类.所有集合类位于java.util包下. 集合类就像容是器,现实生活中容器的功能,无非就是添加 ...
- lua学习之表达式篇
表达式 表达式用于表达值 lua 中表达式可以为数字常量,自变字符串,变量,一元和二元操作符,函数调用.函数定义.table 构造式 算数操作符 一元操作符 -负号 二元操作符 -减号 / ^ % x ...
- 利用idea对tomcat容器进行debug
通过idea对tomcat容器进行debug有两种方式: 一种直接修改idea中引用tomcat的启动配置 另一种是修改tomcat的启动脚本再通过设置diea的远程debug的方式进行调试 1.设置 ...
- Java中类的关系
在java里类的关系大致分为三种, 1.继承(a is b):继承extends,实现implement 2.包含(a has b):组合>聚合>关联.关系亲密度越来越小,一个类在另一个类 ...
- python学习Day27--time模块、sys模块、os模块和序列化模块
[知识点] 1.时间模块: (1)时间戳时间,格林威治时间,float数据类型 英国伦敦的时间:1970.1.1 0:0:0 北京时间:1970.1.1 8:0:0 (2)结构化时间, ...
- 吴恩达deepLearning.ai循环神经网络RNN学习笔记_看图就懂了！！！(理论篇)
前言 目录: RNN提出的背景 - 一个问题 - 为什么不用标准神经网络 - RNN模型怎么解决这个问题 - RNN模型适用的数据特征 - RNN几种类型 RNN模型结构 - RNN block - ...