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源码阅读之ClassPathXmlApplicationContext加载beanFactory
ApplicationContext applicationContext = new ClassPathXmlApplicationContext("spring-config.xml&q ...
- kubernetes安装-kubeadm
系统信息 角色 系统 CPU Core memory master 18.04.1-Ubuntu 4 8G slave 18.04.1-Ubuntu 4 4G 安装前准备(主节点和从节点都需要执行) ...
- Codeforces 961C Chessboard（将碎了的、染色乱了的棋盘碎片拼一起）
题目链接:点击打开链接 Magnus decided to play a classic chess game. Though what he saw in his locker shocked hi ...
- Springboot笔记（二）整合
1.整合Freemarker 一种模板引擎,前端渲染模板的,类似于EL,jsp,不过比前两个好用 导入很简单 pom.xml <dependency> <groupId>o ...
- 文本相似性热度统计(python版)
0. 写在前面 节后第一篇,疫情还没结束,黎明前的黑暗,中国加油,武汉加油,看了很多报道,发现只有中国人才会帮助中国人,谁说中国人一盘散沙?也许是年龄大了,看到全国各地的医务人员源源不断的告别家人去支 ...
- 为了控制Bean的加载我使出了这些杀手锏
故事一: 绝代有佳人,幽居在空谷 美女同学小张,在工作中遇到了烦心事.心情那是破凉破凉的,无法言喻. 故事背景是最近由于需求变动,小张在项目中加入了MQ的集成,刚开始还没什么问题,后面慢慢问题的显露出 ...
- Git 分支设计规范
概述 这篇文章分享 Git 分支设计规范,目的是提供给研发人员做参考. 规范是死的,人是活的,希望自己定的规范,不要被打脸. 在说 Git 分支规范之前,先说下在系统开发过程中常用的环境. 简称 全称 ...
- git push 的解决方案
如果输入$ git push origin master 提示出错信息: 或者 失败的原因:不能 push 远端仓库 原因分析:由于你当前分支落后与远程端对应分支,所以无法更新: 解决方案:使用 gi ...
- qt creator源码全方面分析(2-10-4)
目录 Plugin Life Cycle Plugin Life Cycle 为了能够编写Qt Creator插件,您必须了解启动或关闭Qt Creator时,插件管理器所采取的步骤. 本节详细描述插 ...
- 1.【Spring Cloud Alibaba】服务发现-Nacos
一.服务的提供者与服务的消费者 二.服务发现原理 如果用户中心地址发生变化怎么办? 服务的消费者总能找到服务的提供者的这种原理,即服务发现原理. 三.什么是Nacos? Nacos文档地址请查看,引入 ...