全局组件



<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. powershell脚本之windows服务与进程
			
    powershell脚本之windows服务与进程 服务与进程的区别: Windows服务是指系统自动完成的,不需要和用户交互的过程,可长时间运行的可执行应用程序 进程是程序运行的实例,系统会给运行中 ...
    
			
    2. 
						
  2. shell 获取时间
			
    获取当前时间 t=$(date +"%Y-%m-%d %H-%M-%S") echo $t 获取前一天的当前时间 time=$(date -d "-1 day" ...
    
			
    3. 
						
  3. Linux下编译安装redis
			
    redis是开源,BSD许可,高级的key-value存储系统,可以用来存储字符串,哈希结构,链表,集合,因此,常用来提供数据结构服务. redis和memcached相比的独特之处: 1: redi ...
    
			
    4. 
						
  4. 聚类——GAKFCM的matlab程序
			
    聚类——GAKFCM的matlab程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在聚类——GAKFCM文章中已介绍了GAKFCM算法的理论知识, ...
    
			
    5. 
						
  5. if  else;  while; break;continue ----流程控制系列
			
    第一种语法: if 条件: # @引号是为了把条件和结果分开. 结果1 # 一个Tab或者4个空格 @告诉程序满足上面的if条件才会执行结果1结果2 #如果条件为真(True),执行结果1,然后执行结 ...
    
			
    6. 
						
  6. C语言的main函数到底该怎么写
			
    公众号[编程珠玑]:专注但不限于分享计算机编程基础,Linux,C语言,C++,Python,数据库等编程相关[原创]技术文章,号内包含大量经典电子书和视频学习资源.欢迎一起交流学习,一起修炼计算机“ ...
    
			
    7. 
						
  7. 模拟placeholder
			
    把这个记下来,主要是因为这里的 defaultValue 我之前竟然不知道 <input type="text" value="提示内容" onFocus ...
    
			
    8. 
						
  8. MySQL高级知识（十二）——全局查询日志
			
    前言:全局查询日志用于保存所有的sql执行记录,该功能主要用于测试环境,在生产环境中永远不要开启该功能. 1.如何开启 #1.通过my.cnf配置开启该功能. 注:对my.cnf文件配置后,需重启my ...
    
			
    9. 
						
  9. 两段锁协议（Two-Phase Locking――2PL）
			
    两段锁协议(Two-Phase Locking――2PL) 两段锁协议规定所有的事务应遵守的规则: ① 在对任何数据进行读.写操作之前,首先要申请并获得对该数据的封锁. ② 在释放一个封锁之后,事务不 ...
    
			
    10. 
						
  10. [matlab] 8.蚁群算法解决TSP问题
			
    城市坐标数据下载  密码:07d5 求遍历这52座城市后最后回到最初城市的最短距离 %% 第9章 蚁群算法及MATLAB实现——TSP问题 % 程序9-1 %% 数据准备 % 清空环境变量 clear ...
    
			
    11.