全局组件



<script src="./static/vue.min.js"></script>  // 导入vue


<body>

<div id="app"></div>

<script>

    Vue.component('global-component', {

        template: `

            <div>

                <h3>{{ wanrong }}</h3>

                <h2>{{ wanrong }}</h2>

            </div>

        `,

        data() {

            return {

                wanrong: 'Hello Wanrong',

            }

        },

    });

    new Vue({

        el: '#app',

        template: `<global-component></global-component>`,

    })

</script>

</body>




　　全局组件不用再根实例中注册，可以直接在div标签中使用。




<body>

<div id="app">

    <global-component></global-component>

</div>

<script>

    Vue.component('global-component', {

        template: `

            <div>

                <h3>{{ wanrong }}</h3>

                <h2>{{ wanrong }}</h2>

            </div>

        `,

        data() {

            return {

                wanrong: 'Hello Wanrong',

            }

        },

    });

    new Vue({

        el: '#app',

    })

</script>

</body




　　全局组件的复用：


下图为子组件与父组件之间通信的结构关系图，整体写法结构如下：




组件系统之数据通信




组件系统之混用


　　方法调用及参数传递




组件系统之插槽


　　简单点理解就是将模板中的标签替换到注册的标签的位置。注册的标签中的内容替换slot标签（将整个标签替换）。




组件系统之具名插槽




0
												


											
Vue之子组件的更多相关文章
	

    
						
  1. Vue 给子组件传递参数
		
    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
    
		
    2. 
						
  2. js 实现vue—引入子组件props传参
		
    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
    
		
    3. 
						
  3. element-ui（或者说Vue的子组件）绑定的方法中传入自定义参数
		
    比如el-upload中的 :on-success= fn,其实是给组件el-upload传递一个prop,这样写的话fn只能接受upload组件规定的参数,如果想自己传递父组件中的参数比如b,要写成 ...
    
		
    4. 
								
  4. Vue.js 子组件的异步加载及其生命周期控制
		
    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
    
		
    5. 
						
  5. vue pros 子组件接收父组件传递的值
		
    1.子组件 ItemTemplate.vue <template> <div class="item"> <li v-for="pdata  ...
    
		
    6. 
						
  6. vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数
		
    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...
    
		
    7. 
						
  7. 浅入深出Vue：子组件与数据传递
		
    上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
    
		
    8. 
						
  8. Vue访问子组件实例或子元素
		
    1 尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件(例如,调用子组件的方法).为了达到这个目的,你可以通过 ref 特性为这个子组件赋予一个 ID 引用 ...
    
		
    9. 
						
  9. vue.js_09_vue-父子组件的传值方法
		
    1.父向子传递数据 1>定义一个父组件和一个子组件 2>父组件通过v-bind绑定传递的数据  :parentmsg="msg" 3>子组件需要通过 props: ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 网站出现403 Forbidden
			
    1, 你在一定时间内过多地访问此网站(一般是用采集程序),被防火墙拒绝访问了 2, 网站域名解析到了空间,但空间未绑定此域名 3, 你的网页脚本文件在当前目录下没有执行权限 4, 服务器繁忙,同一IP ...
    
			
    2. 
						
  2. ABAP 7.50 新特性 – Open SQL中的宿主表达式和其它表达式
			
    在长期的停滞后,Open SQL的发展终于从沉睡中醒来.从ABAP 7.40开始,SAP推进了某些关键的改变,以尽可能地包含SQL92中的特性,并提供与ABAP CDS中的DDL里面的SELECT一样 ...
    
			
    3. 
						
  3. 设计模式のBridgePattern（桥接模式）----结构模式
			
    一.产生背景 这里以电视遥控器的一个例子来引出桥接模式解决的问题,首先,我们每个牌子的电视机都有一个遥控器,此时我们能想到的一个设计是——把遥控器做为一个抽象类,抽象类中提供遥控器的所有实现,其他具体 ...
    
			
    4. 
						
  4. CentOS7.6 linux下yum安装redis以及使用
			
    一.安装redis 1.检查是否有redis yum 源 1 yum install redis 2.下载fedora的epel仓库 1 yum install epel-release 3.安装re ...
    
			
    5. 
						
  5. web基础之http
			
    目录 1.Http协议介绍 Http工作原理 http的请求方法 http的响应响应状态码 状态码的类别 常用HTTP状态码简要介绍 用户访问网站携带的参数,以及服务端返回的参数 (http请求报文  ...
    
			
    6. 
						
  6. 【转】git-stash用法小结
			
    https://www.cnblogs.com/tocy/p/git-stash-reference.html 缘起 今天在看一个bug,之前一个分支的版本是正常的,在新的分支上上加了很多日志没找到原 ...
    
			
    7. 
						
  7. JPA和分布式事务简介
			
    1. Transaction 分两种,Local Transaction 和 Global Transaction. 涉及到一个Connection的Commit,称为Local Transactio ...
    
			
    8. 
						
  8. linux驱动之中断处理过程C程序部分
			
    当发生中断之后,linux系统在汇编阶段经过一系列跳转,最终跳转到asm_do_IRQ()函数,开始C程序阶段的处理.在汇编阶段,程序已经计算出发生中断的中断号irq,这个关键参数最终传递给asm_d ...
    
			
    9. 
						
  9. Winform开发框架之字段权限控制
			
    在我的很多Winform开发项目中(包括混合框架的项目),统一采用了权限管理模块来进行各种权限的控制,包括常规的功能权限(按钮.菜单权限).数据权限(记录的权限),另外还可以进行字段级别的字段权限控制 ...
    
			
    10. 
						
  10. 十分钟学会Java8：lambda表达式和Stream API
			
    Java8 的新特性:Lambda表达式.强大的 Stream API.全新时间日期 API.ConcurrentHashMap.MetaSpace.总得来说,Java8 的新特性使 Java 的运行 ...
    
			
    11.