<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
    <link rel="stylesheet" href="src/dist/styles/iview.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="src/dist/vue.min.js"></script>
    <script src="src/dist/iview.min.js"></script>
    <style>
        *{
            box-sizing:border-box;
        }
        .header,.footer{
            width:1200px;
            height:60px;
            border:1px solid #ccc;
            text-align:center;
            line-height:60px;
            margin:0 auto;

        }
        .footer{
            position:absolute;
            left:50%;
            margin-left:-600px;
            bottom:0;
        }
        .main{
            width:1200px;
            margin:0 auto;
            min-height:400px;
            border:1px solid #ccc;
            margin-top:20px;
            padding:20px;
        }
    </style>
</head>
<body>
    <div id="page">
        <cc-header :ppt01="ppt01"></cc-header>
        <div class="main">
            <h2><i-button @click="sendHeader">父向子(header)传数据</i-button></h2>
            <ul>
                <li v-for="item in list">{{item}}</li>
                <li>{{ppt02 || '---'}}</li>
            </ul>
        </div>
        <cc-footer @change02="aceptFooter"></cc-footer>
    </div>
    <script>
        var hub = new Vue();

        Vue.component('ccHeader',{
            template:'<div class="header">\
                我是header---------{{ppt01 || "==="}}\
                <i-button @click="sendFooter">发送给footer</i-button>\
            </div>',
            data:function(){
                return {
                    hh:''
                }
            },
            props:['ppt01'],
            methods:{
                sendFooter:function(){
                    alert('ccc')
                    hub.$emit('change01',this.ppt01)
                }
            }
        })

        Vue.component('ccFooter',{
            template:'<div class="footer">\
                我是fooer----------{{ff || "==="}}\
                <i-button @click="sendFather">发送给父亲</i-button>\
            </div>',
            data:function(){
                return{
                    ff:'abcd'
                }
            },
            methods:{
                sendFather:function(){
                    this.$emit('change02',this.ff)
                }
            },
            created:function(){
                var self = this;
                hub.$on('change01',function(val){
                    self.ff = val;
                })
            }
        })

        var vm = new Vue({
            el:'#page',
            data:{
               list:['1','2','3'],
               ppt01:'',
               ppt02:''
            },
            methods:{
                sendHeader:function(){
                    this.ppt01 = '呵呵';
                },
                aceptFooter:function(val){
                    alert(val+'来自footer');
                    this.ppt02 = val;
                }
            }
        })

    </script>
</body>
</html>

vue1.0父子、兄弟间 通信案例的更多相关文章

  1. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  2. vue2.0 父子组件通信 兄弟组件通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  3. vue2.0父子组件通信以及同级组件通信

    1.父向子通信 父组件为singer.vue.子组件为list-view.vue.需要把歌手的数据传给子组件.则绑定 :data = 'singers' ,singers为父组件的值.data为子组件 ...

  4. 三大前端框架（react、vue、angular2+）父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

  5. vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  6. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  7. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

  8. vue1.0

    vue1.0学习总结   前言 使用vue已经有三.四个月了,但是只是学着使用了一些基本方法.因为现在的前端框架越来越多(Angular,React...),但是我相信万变不离其宗,很多用法框架之间还 ...

  9. Vue2.0父子组件间事件派发机制

    从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...

随机推荐

  1. 继承QWidget的派生类控件不能设置QSS问题解决（使用style()->drawPrimitive(QStyle::PE_Widget，也就是画一个最简单最原始的QWidget，不要牵扯其它这么多东西）

    自定义控件时基类用了QWidget,发现qss设置不起作用,需要重载其paintEvent函数即可: 如下代码: void CCustomWidget::paintEvent(QPaintEvent* ...

  2. 带你玩转Visual Studio——带你理解多字节编码与Unicode码

    目录(?)[-] 多字节字符与宽字节字符 char与wchar_t string与wstring string 与 wstring的相关转换 字符集Charcater Set与字符编码Encoding ...

  3. （六）api网关服务 zuul-过滤器

    开启上文服务: Zuul给我们的第一印象通常是这样:它包含了对请求的路由和过滤两个功能,其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础.过滤器功能则负责对请求的处理过 ...

  4. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  5. 如何做到Ubuntu14.04下的mongdb远程访问？（图文详解）

    不多说,直接上干货! 本教程详细指导大家如何开启并设置用户权限.MongoDB默认是没有开启用户权限的,如果直接在公网服务器上如此搭建MongoDB,那么所有人都可以直接访问并修改数据库数据了. 其实 ...

  6. Kafka Consumer1

    本文的代码基于kafka的0.10.1的版本. 重新设计的原因 0.9以前的consumer是通过zookeeper来进行状态管理里的. 羊群效应 任何Broker或者Consumer的增减都会触发所 ...

  7. sql server 查询某数据库中包含某字段的所有表格

    场景:查询DNMes数据库中所有包含RFID字段的表名 sql语句: select object_name(id) objName,Name as colName from syscolumns wh ...

  8. 有关马氏距离和hinge loss的学习记录

    关于度量学习,之前没有看太多相关的文献.不过南京的周老师的一篇NIPS,确实把这个问题剖析得比较清楚. Mahalanobis距离一般表示为d=(x-y)TM(x-y),其中x和y是空间中两个样本点, ...

  9. 【原创】Apache和Tomcat实现动静分离

    集群中每个节点都启用了页面静态化功能,所以,为了防止单个节点刷新造成找不到页面问题,将每个节点刷新的页面都放入apache虚拟目录下,由apache统一来处理.静态页面由apache处理,动态页面仍然 ...

  10. lua中调用C++函数

    lua中调用C++函数 我们产品中提供了很多lua-C API给用户在lua中调用,之前一直没用深究其实现原理,只是根据已有的代码在编码.显然这不是一个好的习惯,没用达到知其所以然的目的. 一.基本原 ...