<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
    <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
    <div id="page">
        <com-header></com-header>
        <h3>----------------</h3>
        <com-footer></com-footer>
        <h2>===============对话列表====================</h2>
        <ul v-if="dhList && dhList.length">
            <template v-for="(item,index) in dhList">
                <li><a @click="remove(index)">X</a>&nbsp;{{item}}</li>
            </template>
        </ul>
    </div>

    <script type="text/x-template" id="comHeaderTemplate">
        <div>
            <button @click="sendMess()">
                {{msg}}
            </button>
            <input type=="sendMess()">
        </div>
    </script>

    <script type="text/x-template" id="comFoooterTemplate">
        <div>
            <button @click="sendMess()" >
                {{msg}}
            </button>
            <input type=="sendMess()">
        </div>
    </script>
    <script>
        var pu = new Vue();
        var dhList = [];

        var comHeader = {
            template:'#comHeaderTemplate',
            data:function(){
                return {
                    msg:'header',
                    userMess:''
                }
            },
            methods:{
                sendMess:function(){
                    pu.$emit('mess',this.userMess);
                    this.userMess = '';
                }
            },
            mounted:function(){
                pu.$on('mess2',function(m2){
                    console.log("footer:"+m2)
                    dhList.push("footer:"+m2);
                })
            }
        }

        var comFooter = {
            template:'#comFoooterTemplate',
            data:function(){
                return {
                    msg:'footer',
                    userMess:''
                }
            },
            methods:{
                sendMess:function(){
                    pu.$emit('mess2',this.userMess);
                    this.userMess = '';
                }
            },
            mounted:function(){
                pu.$on('mess',function(m){
                    console.log("header:"+m);
                    dhList.push("header:"+m);
                })
            }
        }

        new Vue({
            el:'#page',
            data:{
                dhList:dhList
            },
            methods:{
                remove:function(index){
                    );
                }
            },
            components:{
                comHeader:comHeader,
                comFooter:comFooter
            }
        })
    </script>
</body>
</html>

vue2.0 兄弟组件数据传递方法的更多相关文章

  1. vue2.0 父子组件数据传递prop

    vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...

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

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

  3. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  4. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  5. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  6. 手把手教你撸个vue2.0弹窗组件

    手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地 ...

  7. Spring MVC 3.0 返回JSON数据的方法

    Spring MVC 3.0 返回JSON数据的方法1. 直接 PrintWriter 输出2. 使用 JSP 视图3. 使用Spring内置的支持// Spring MVC 配置<bean c ...

  8. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

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

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

随机推荐

  1. nyoj 628 小媛在努力 【搜索】

    第一次是直接建一个10^7的数组 结果  内存大的要死.! 是不是能够不建数组 这下好了 小媛在努力 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 在多媒体数据处理 ...

  2. m_Orchestrate learning system---十八、mo项目的启示是什么

    m_Orchestrate learning system---十八.mo项目的启示是什么 一.总结 一句话总结:多看教程,体统看教程的学, 完全不懂的话百度的作用也不大 多学点,可以节约后面的超多时 ...

  3. ThinkPHP5.0框架开发实现简单的页面跳转

    ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...

  4. nyoj-737--石子合并（一）（动态规划）

    石子合并(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述     有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程只能每次将相邻的两堆 ...

  5. Kali linux 2016.2 的 plyload模块之meterpreter plyload详解

    不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)中的payloads模块详解 当利用成功后尝试运行一个进程,它将在系统进程列表里显示,即使在木马中尝试执行系统命令, ...

  6. 根据ip地址获取城市

    var ip=context.Request.UserHostAddress; string url = "http://int.dpool.sina.com.cn/iplookup/ipl ...

  7. 【转载】大型系统中使用JMS优化技巧

    [本文转自:http://www.javabloger.com/article/sun-openmq-jms-large-scale-systems.html] 我们先来看看在Sun OpenMQ系统 ...

  8. php截取字符串|php截取字符串前几位|php截取中文字符串

    转 截取字符串专题:php截取字符串函数,php 字符串长度,php截取字符串前几位 PHP截取中文字符串(mb_substr)和获取中文 => http://www.q3060.com/lis ...

  9. Quartz任务调度 服务日志+log4net打印日志+制作windows服务

    引言 现在许多的项目都需要定时的服务进行支撑,而我们经常用到的定时服务就是Quartz任务调度了.不过我们在使用定时Job进行获取的时候,有时候我们就需要记录一下自定义的日志,甚至我们还会对执行定时J ...

  10. vue总线bus传值的一些问题

    动态组件中用总线Bus的坑 在我们的项目总难免会遇到用动态组件,这里就拿vue官方的例子为例,我们欲在组件中添加总线bus(其实官方推荐的vuex更好用,但是有时候我们只需要传一个小状态,不需要用vu ...