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. 2018.06.27"Shortest" pair of paths（费用流）
			
    "Shortest" pair of paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1589 A ...
    
			
    2. 
						
  2. 2018.06.26「TJOI2018」数学计算（线段树）
			
    描述 小豆现在有一个数 xxx ,初始值为 111 . 小豆有 QQQ 次操作,操作有两种类型: 111 $ m$ : x=x×mx=x×mx=x×m ,输出 xxx modmodmod MMM :  ...
    
			
    3. 
						
  3. pat树之专题（30分）
			
    (好好复习是王道) 1115. Counting Nodes in a BST (30) 分析:简单题——将bst树构造出来,然后给每个节点打上高度.最后求出树的高度.然后count树高的节点数加上树 ...
    
			
    4. 
						
  4. javaWeb的验证码编写
			
    一.前言 验证码可以说在我们生活中已经非常普遍了,任何一个网站,任何一个App都会有这个功能,但是为啥要有这个呢?如何做才能做出来呢?下面小编会带领大家一起用java完成一个验证码的功能. 二.验证码 ...
    
			
    5. 
						
  5. nginx负载均衡的5种策略
			
    nginx可以根据客户端IP进行负载均衡,在upstream里设置ip_hash,就可以针对同一个C类地址段中的客户端选择同一个后端服务器,除非那个后端服务器宕了才会换一个. nginx的upstre ...
    
			
    6. 
						
  6. 解决普通用户sudo时出现/usr/bin/sudo must be owned by uid 0 and have the setuid bit set
			
    一:因为之前误操作使用sudo chmod -R 777 /usr命令修改了usr文件的所有者导致了此问题: 二:网上说需要进入recovery mode,经过自己的测试是不需要的: 三:步骤(只需登 ...
    
			
    7. 
						
  7. bzoj2893(费用流)
			
    先缩点,然后拆点,其实是很经典的一种操作,把不好做的点拆成边,然后我一开始想的是网络流,答案当然是增广次数, 但可以发现跑网络流的话不同的跑法增广次数不一样,不太好找最小的.我们可以换一种神奇的思路, ...
    
			
    8. 
						
  8. 准备用有人云平台和tlink.io云平台和电脑做云转发
			
    初步想的是用有人做国网电表转发,用tlink.io做综合采集模块转发,耗时一天 然后用tlink.io的做二次前端开发,耗时两天 用有人做二次前端开发,耗时两天 最后可以试试用常见的OPC公网转发到这 ...
    
			
    9. 
						
  9. MySQL中的数据约束
			
    什么是数据约束: 对用户操作表的数据进行约束 1.默认值: 作用:当用户对使用默认值的字段不插入值的时候,就使用默认值. 注意:1)对默认值字段插入null是可以的. 2)对默认值字段可以插入非nul ...
    
			
    10. 
						
  10. js去除字符串中的空格
			
    //去除空格 function Trime(string){ return string.replace(/\s/ig,""); }
    
			
    11.