<!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. 二分图最大匹配 Hopcroft-Karp算法模板

    #include <iostream> #include <cstdlib> #include <cstdio> #include <cstring> ...

  2. JavaBean,List,Map转成json格式

    public class User { private String username; private String password; public String getUsername() { ...

  3. L9,a cold welcome

    expression: a large crowd of 一大群 in twenty minutes’time 20分钟之后 一些时间使用的介词 in two year‘s time on Satur ...

  4. webapp之路--meta标签format-detection、apple-mobile-web-app-capable

    1. format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta ...

  5. MVC 创建Word文档

    /// <summary> /// 创建一个word /// </summary> /// <returns></returns> public Act ...

  6. filter by date in Sphinx

    Indexing: include the date column in the sql_query of source. Also set the date as sql_attr_unit PHP ...

  7. mac编译openssl扩展报错 openssl.c:44:10: fatal error: 'openssl/evp.h' file not found

    解决办法 brew link openssl --force 然后 ./configure --with-openssl --with-php-config=/usr/local/php/bin/ph ...

  8. apk文件分析原则

    如果在dex生成的jar文件里没有发现关键内容的话,就要注意jar里面的native函数以及loadlibrary操作,从而可以判断出加载了哪些so,调用了什么函数.就不会出现判断不出是不是加载了某s ...

  9. HDU 1527 取石子游戏(威佐夫博弈)

    基础威佐夫博弈,判断奇异局势即可,判断方式为k为两数之差绝对值,(sqrt(5) + 1) / 2 * k若等于两数小者则为奇异局势,也就是必败态. #include<stdio.h> # ...

  10. USACO Section 1.2 Transformations 解题报告

    题目 题目描述 一块 N x N正方形的黑白瓦片的图案要被转换成新的正方形图案. 写一个程序来找出将原始图案按照以下列转换方法转换成新图案的最小方式: 转 90 度:图案按顺时针转 90 度. 转 1 ...