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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 深入源码解析spring aop实现的三个过程
Spring AOP的面向切面编程,是面向对象编程的一种补充,用于处理系统中分布的各个模块的横切关注点,比如说事务管理.日志.缓存等.它是使用动态代理实现的,在内存中临时为方法生成一个AOP对象,这个 ...
- 如何使用jmeter做一个功能的性能测试
一.为什么又再次写类似的文章? 在博客园和公号写文章,已经快两年了,所以自然在公号和博客园都能联系到我的. 也就是几天前,有个人加我微信,对于总有人加我好友,我已经觉得不奇怪了,为什么呢? 加我好友的 ...
- 【Java并发工具类】Lock和Condition
前言 Java SDK并发包通过Lock和Condition两个接口来实现管程,其中Lock用于解决互斥问题,Condition用于解决同步问题.我们需要知道,Java语言本身使用synchroniz ...
- C# 正则进阶
.NET 中的正则表达式是基于 Perl 5 的正则表达式. 超时 从 .NET Framework 4.5 开始,正则表达式支持在匹配操作中指定超时时间.如果匹配超时,就会抛出 RegexMatch ...
- nginx配置文件的通用语法介绍
nginx的配置文件是ascii文本文件. 比如http{ }这种的是指令块,include mime.types: 这种是指令,include是指令,mime.types指令的参数,指令和参数之 ...
- P2571 [SCOI2010]传送带——hyl天梦
P2571 [SCOI2010]传送带题解----天梦 如写的不好,请多见谅. 对于这道题,我首先想说,确实困惑了我好久,看网上的各种题解,却都不尽人意,思路早已明白,却不会操作.最后想想,还是觉得自 ...
- Iterator Protocol - Python 描述符协议
Iterator Protocol - Python 描述符协议 先看几个有关概念, iterator 迭代器, 一个实现了无参数的 __next__ 方法, 并返回 '序列'中下一个元素,在没有更多 ...
- [Effective Java 读书笔记] 第三章 对所有对象都通用的方法 第十---十一条
第十条 始终覆盖toString() toString的实现可以使类使用起来更加舒适,在执行println等方法时打印出定制信息. 一单实现了自己的toString,指定输出的固定格式,在方法的文档说 ...
- 神奇的 SQL 之 WHERE 条件的提取与应用
开心一刻 小明:为什么中国人结婚非要选一个好日子呢 ? 楼主:嗯 ? 那肯定啊,结完婚之后你还能有好日子吗 ? 小明:那结婚时所说的白头到老是真的吗 ? 楼主:这哪能是真的,你看现在,头发还没白就秃了 ...
- React中使用 PropTypes 进行类型检查
官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...