1.解决非父子组件之间的传值问题

非父子组件传值(Bus/总线/发布订阅模式/观察者模式)

给 Vue类上挂在一个属性，然后创建vue实例时，实例就拥有了这个属性

Vue.prototype.bus = new Vue();

//发送
this.bus.$emit('change',this.selfContent);
//监听
this.bus.$on('change',function (value) {
    this_.selfContent = value;
});
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>非父子组件传值(Bus/总线/发布订阅模式/观察者模式)</title>

</head>

<body>

<script src="../../vue.js"></script>

<div id="app">

    <child content="dong"></child>

    <child content="hao"></child>

</div>

<script>

    Vue.prototype.bus = new Vue();

    Vue.component('child',{

        data:function(){

          return {

              selfContent:this.content

          }

        },

        props:{

          content:String,

        },

        template:'<div @click="HandleClick">{{selfContent}}</div>',

        methods:{

            HandleClick:function () {

                this.bus.$emit('change',this.selfContent);

            }

        },

        // #组件被挂载时候执行

        mounted:function () {

            var this_ = this

            this.bus.$on('change',function (value) {

                this_.selfContent = value;

            });

        }

    });

    var vm = new Vue({

        el:"#app"

    })

</script>

</body>

</html>

2. 插槽

使用：

<child>

    <!--定义插槽-->

    <p>dell</p>

    <p>dell</p>

    <p>dell</p>

</child>
 
 //slot标签使用插槽
Vue.component('child',{

    props:['content'],

    template:`<div>

                    <p>hello</p>

                    <slot></slot>

               </div>`

})

默认插槽：

<default></default>

Vue.component('default',{

    template:`<div>

                    <slot>我是默认值</slot>

               </div>`

})

具名插槽：

<body-content>

    <!--具名插槽-->

    <div class="header" slot="header">header</div>

    <div class="footer" slot="footer">footer</div>

</body-content>

// #header-footer

// 当不传时，使用默认值

Vue.component("body-content",{

    template:`<div>

                <slot name="header"></slot>

                <div class="content">content</div>

                <slot name="footer"></slot>

                <slot name="default-header">

                    <h1>默认header</h1>

                </slot>

                </div>`

})
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用插槽（slot）</title>

    <script src="../../vue.js"></script>

</head>

<div id="app">

    <child>

        <!--插槽-->

        <p>dell</p>

        <p>dell</p>

        <p>dell</p>

    </child>

    <!--#默认值-->

    <default></default>

    <!--// #header-footer-->

    <body-content>

        <!--具名插槽-->

        <div class="header" slot="header">header</div>

        <div class="footer" slot="footer">footer</div>

    </body-content>

</div>

<script>

    Vue.component('child',{

        props:['content'],

        template:`<div>

                        <p>hello</p>

                        <slot></slot>

                   </div>`

    })

    Vue.component('default',{

        template:`<div>

                        <slot>我是默认值</slot>

                   </div>`

    })

    // #header-footer

    // 当不传时，使用默认值

    Vue.component("body-content",{

        template:`<div>

                    <slot name="header"></slot>

                    <div class="content">content</div>

                    <slot name="footer"></slot>

                    <slot name="default-header">

                        <h1>默认header</h1>

                    </slot>

                    </div>`

    })

    var vm =new Vue({

        el:"#app"

    })

</script>

<body>

</body>

</html>

3. 作用域插槽

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>作用域插槽</title>

    <script src="../../vue.js"></script>

</head>

<body>

<div id="app">

    <child>

        <!--作用域插槽 template-->

        <template slot-scope="props">

            <h1>{{props.item}}</h1>

        </template>

    </child>

    <!--dom结构由外部传递-->

    <!--使用template标签，并且用slot-scope接收-->

</div>

<script>

    Vue.component('child',{

        data:function(){

          return {

              list:[1,2,3,4,5,6]

          }

        },

      // :item="item"子组件向父组件中传递数据

        template:`<div>

                    <ul>

                        <slot v-for="item in list" :item="item">

                        </slot>

                    </ul>

                    </div>`

    })

    var vm = new Vue({

        el:"#app"

    })

</script>

</body>

</html>

4.动态组件和v-once指令

使用component标签 动态显示组件

<component :is="type"></component>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动态组件和v-once指令</title>

    <script src="../../vue.js"></script>

</head>

<body>

<div id="app">

    <!--<child-one v-if="type==='child-one'"></child-one>-->

    <!--<child-two v-if="type==='child-two'"></child-two>-->

    <component :is="type"></component>

    <!--耗费性能，重复销毁  创建-->

    <!--v-once直接放到内存里-->

    <button @click="handleBtnclick">click me</button>

</div>

<script>

    Vue.component('child-one',{

        template:`<div v-once>this is child one</div>`

    })

    Vue.component('child-two',{

        template:`<div v-once>this is child two</div>`

    })

    var vm = new Vue({

        el:"#app",

        data:{

            type:'child-one'

        },

        methods:{

            handleBtnclick:function () {

                this.type = this.type==='child-one'?'child-two':'child-one'

            }

        }

    })

</script>

</body>

</html>
												


											
Vue2.5开发去哪儿网App 第四章笔记 下的更多相关文章
	

    
								
  1. Vue2.5开发去哪儿网App 第五章笔记 下
		
    1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
    
		
    2. 
						
  2. Vue2.5开发去哪儿网App 第四章笔记 上
		
    一 .  组件细节知识点 1.  解决组件在h5中编码规范 例如 : table , ul , ol  等等 <table> <tbody> <row></r ...
    
		
    3. 
						
  3. Vue2.5开发去哪儿网App 第三章笔记  下
		
    1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class   例如: :class="{activated:isactivated}" 上面的语法 ...
    
		
    4. 
						
  4. Vue2.5开发去哪儿网App 第五章笔记 上
		
    1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
    
		
    5. 
						
  5. Vue2.5开发去哪儿网App 第三章笔记  上
		
    1.  vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新  ...
    
		
    6. 
						
  6. Vue2.5 开发去哪儿网App
		
    Vue2.5开发去哪儿网App 技术栈和主要框架
    
		
    7. 
						
  7. Vue2.5开发去哪儿网App 首页开发
		
    主页划 5 个组件,即 header  icon  swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
    
		
    8. 
						
  8. Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
		
    一,数据共享 1.  安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
    
		
    9. 
						
  9. Vue2.5开发去哪儿网App 从零基础入门到实战项目
		
    第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MYSQL 事务测试
			
    mysql 事务测试 创建张表 lock1 增加字段 id,name . 增加两条记录 1,a 2,b 启动第一个会话 BEGIN; update lock1 set name='c' where i ...
    
			
    2. 
						
  2. (3)The critical role librarians play in the opioid crisis
			
    https://www.ted.com/talks/chera_kowalski_the_critical_role_librarians_play_in_the_opioid_crisis 00:1 ...
    
			
    3. 
						
  3. 变动事件_DOM2级的变动事件(mutation)
			
    DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构中发生任何变化时触发.这个事件在其他任何事件触发后都会触发. DOMNodeInserted:在一个节点作为子节点被插 ...
    
			
    4. 
						
  4. Word图片上传控件卸载教程-Xproer.WordPaster
			
      卸载教程:      卸载控件-IE          Windows XP          Windows 7(x86)          Windows 7(x64)      卸载控件-C ...
    
			
    5. 
						
  5. 修改input标签type=file类型的文字
			
    <form name="form" id="form" method="post" enctype="multipart/f ...
    
			
    6. 
						
  6. POJ2431--Expedition(优先队列)
			
    Description A group of cows grabbed a truck and ventured on an expedition deep into the jungle. Bein ...
    
			
    7. 
						
  7. IP地址和域
			
    1. 0. 0. 0到 126.255.255.255为A类 主要分配给具有大量主机而局域网络数量较少的大型网络 128.0.0.0到191.255.255.255为B类 一般用于国际性大公司和政府机 ...
    
			
    8. 
						
  8. request.getScheme() 使用方法
			
    今天在看代码时,发现程序使用了 request.getScheme() .不明白是什么意思,查了一下.结果整理如下: 1.request.getScheme() 返回当前链接使用的协议:一般应用返回h ...
    
			
    9. 
						
  9. hdu 1698 Just a Hook 【线段树+lazy】
			
    题目 写了一天的线段树,这道题主要说明一下sum是赋值的,不是累加的,并且在push_down的时候lazy也是赋值的.因可能对懒标记的理解还不是很透彻吧. #include <iostream ...
    
			
    10. 
						
  10. oj错误之char型超出范围
			
    在oj时遇到一个题 题目本身并不是很难,但在一个数据时出了错,刚开始一直没想通是哪里出了错 下面为源代码 #include <bits/stdc++.h> using namespace  ...
    
			
    11.