<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-dmeo</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="page">
          <input type="text" v-model="mess">
         <button @click="clickChild">父向子传递</button>
        <hellow></hellow>
    </div>
    <script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script>
       var  handle= function(){
               var hellow = {
               	     template:"{{arr|json}}",
               	     data:function(){
               	     	return {
               	     		arr:[]
               	     	}
               	     },
               	     events:{
               	     	'addNew':function(val){
               	     		this.arr.push(val);
               	     	}
               	     }
               }

               return new Vue({
                    el:"#page",
                    data:{
                       mess:''
                    },
                    methods:{
                    	clickChild:function(){
                    		this.$broadcast('addNew',this.mess.trim());
                    		this.mess = '';
                    	}
                    },
                   components:{
                       hellow:hellow,
                    }
                })
       }()

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

vuejs 父组件向子组件传递($broadcast()的用法)的更多相关文章

  1. vue父组件与子组件之间的数据传递

    父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...

  2. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  3. Vue 组件&组件之间的通信 之 父组件向子组件传值

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...

  4. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  5. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  6. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  7. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  8. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  9. vue 父组件向子组件传递事件/调用事件

    方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...

  10. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

随机推荐

  1. C# 初步学习

    这学期有了C#开发这门课....先做了计算器,还有进制转换,别人看来似乎很强,其实在ACM中算是两个简单的水题了.....参加竞赛一年下来,发现学到的算法和数据结构都是十分有用的东西. 计算器最核心的 ...

  2. ubuntu 下重装mysql若干问题

    最近由于种种原因需要重装mysql.打开终端开始卸载 sudo apt-get remove mysql-comm sudo apt-get auto remove 重新开始安装mysql sudo ...

  3. PAT1008

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B The highest building in our city has on ...

  4. [转]学会Python可以有以下几类工作方向:

    Python开发工程师 :一般需要精通Python编程语言,有Django等框架的使用经验,实习无要求. Python高级工程师 : 北上广深的话,薪金在1万以上,需要精通Linux/Unixg平台, ...

  5. scroll、scrollBy和 scrollTo三种方法定位滚动条位置

    在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll.scrollBy和 scrollTo,三 ...

  6. 浅谈ssh(struts,spring,hibernate三大框架)整合的意义及其精髓

    hibernate工作原理 原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Sesssion 4.创建事务Transation 5.持久化操作 6.提 ...

  7. Entity Framework 学习中级篇1—EF支持复杂类型的实现

    本节,将介绍如何手动构造复杂类型(ComplexType)以及复杂类型的简单操作. 通常,复杂类型是指那些由几个简单的类型组合而成的类型.比如:一张Customer表,其中有FristName和Las ...

  8. 集合问题 离线+并查集 HDU 3938

    题目大意:给你n个点,m条边,q个询问,每条边有一个val,每次询问也询问一个val,定义:这样条件的两个点(u,v),使得u->v的的价值就是所有的通路中的的最长的边最短.问满足这样的点对有几 ...

  9. activemq学习

    一.特性及优势 1.实现JMS1.1规范,支持J2EE1.4以上2.可运行于任何jvm和大部分web容器(ActiveMQ works great in any JVM)3.支持多种语言客户端(jav ...

  10. 货物搬运(move)

    货物搬运(move) 题目描述 天地无情人有情,一方有难八方支援!汶川大地震发生后,灾区最紧缺的是救灾帐篷,全国各地支援的帐篷正紧急向灾区运送.假设围绕纹川县有环行排列的n个救灾帐篷的存储点,每个存储 ...