全局组件



<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. Python面试题（二）【转】
			
    转载出处http://www.cnblogs.com/goodhacker/p/3387027.html 1.python中类方法.类实例方法.静态方法有何区别? 区别: 类方法和静态方法都可以被类和 ...
    
			
    2. 
						
  2. LeetCode算法题-Palindrome Linked List（Java实现）
			
    这是悦乐书的第196次更新,第202篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第58题(顺位题号是234).给出一个单链表,确定它是否是回文.例如: 输入:1-> ...
    
			
    3. 
						
  3. 【Linux基础】VI 编辑器基本使用方法
			
    vi编辑器是所有Unix及Linux系统下标准的编辑器.对Unix及Linux系统的任何版本,vi编辑器是完全相同的,它是Linux中最基本的文本编辑器. 第一章vi的三种模式 第二章vi文本编辑器  ...
    
			
    4. 
						
  4. cf  20190307     Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round)
			
    B. Mike and Children time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
    
			
    5. 
						
  5. 设计模式のMediatorPattern（中介者模式）----行为模式
			
    一.产生背景 从生活中的例子可以看出,不论是QQ游戏还是QQ群,它们都是充当一个中间平台,QQ用户可以登录这个中间平台与其他QQ用户进行交流,如果没有这些中间平台,我们如果想与朋友进行聊天的话,可能就 ...
    
			
    6. 
						
  6. swift Class的内存布局
			
    class Human { //8 type or isa //retainCount var age: Int?//16 var name: String?//16 var nicknames: [ ...
    
			
    7. 
						
  7. redis加锁
			
    1. redis加锁分类 redis能用的的加锁命令分表是INCR.SETNX.SET2. 第一种锁命令INCR 这种加锁的思路是, key 不存在,那么 key 的值会先被初始化为 0 ,然后再执行 ...
    
			
    8. 
						
  8. UVA1374-Power Calculus(迭代加深搜索)
			
    Problem UVA1374-Power Calculus Accept:107  Submit:584 Time Limit: 3000 mSec  Problem Description  In ...
    
			
    9. 
						
  9. Linux：Day7(上) find、文件特殊权限、if语句
			
    文件查找: 在文件系统上查找符合条件的文件: 文件查找工具:locate,find locate:非实时查找(数据库查找) find:实时查找: locate: 依赖于事先 构建的索引:索引的构建是在 ...
    
			
    10. 
						
  10. 【转】git-stash用法小结
			
    https://www.cnblogs.com/tocy/p/git-stash-reference.html 缘起 今天在看一个bug,之前一个分支的版本是正常的,在新的分支上上加了很多日志没找到原 ...
    
			
    11.