<!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">
        <hellow></hellow>
        {{arr|json}}
    </div>
    <script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script>
       var  handle= function(){
               var hellow = {
               	     template:"<div style='color:#f00;text-align:center;'><input type='text' v-model='mess' /><button @click='csend()'>点击</button>{{mess}}</div>",
               	     data:function(){
               	     	return {
               	     		mess:''
               	     	}
               	     },
               	     methods:{
               	     	csend:function(){
               	     		if(this.mess.trim()){
               	     			 this.$dispatch('handleIt',this.mess)
               	     			 this.mess='';
               	     		}
               	     	}
               	     }
               }

               return new Vue({
                    el:"#page",
                    data:{
                       arr:[],
                    },
                    methods:{

                   },
                   events:{
                   	  "handleIt":function(msg){
                          this.arr.push(msg);
                      }
                   },
                   components:{
                       hellow:hellow,
                    }
                })
       }()

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

vuejs 子组件传递父组件的第二种方式的更多相关文章

  1. vuejs 子组件传递父组件的第一种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vuejs子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...

  3. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  4. vue子组件向父组件传递参数的基本方式

    子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...

  5. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vuejs利用props，子组件修改父组件的数据，父组件修改子组件的的数据，数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  7. vue2.0 子组件和父组件之间的传值（转载）

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

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

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

  9. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

随机推荐

  1. java synchronized内置锁的可重入性和分析总结

    最近在读<<Java并发编程实践>>,在第二章中线程安全中降到线程锁的重进入(Reentrancy) 当一个线程请求其它的线程已经占有的锁时,请求线程将被阻塞.然而内部锁是可重 ...

  2. Chapter 1 First Sight——22

    The girls were opposites. The tall one was statuesque. 女生却相反,高的像雕像一般 She had a beautiful figure, the ...

  3. HDU 3487 Play with Chain | Splay

    Play with Chain Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. zf-关于改绍兴县2个简单的BUG却需要ORACLE数据库的感慨

    装了一天你的数据库,其实可以直接检出拿到后台代码,然后远程实施让他进项目,我在他的项目上找action,找图片都是一样的,有时候需求文档上也是会截图到action的,蛋疼,这么简单的方法我居然忘记了.

  5. CASpringAnimation

    iOS9新出现的 /** Subclass for mass-spring animations. */ @interface CASpringAnimation : CABasicAnimation ...

  6. vim Podfile

    platform :ios, "7.0"pod "AFNetworking"pod "SDWebImage"pod "SVProg ...

  7. 硬盘安装Win7、CentOS7双系统

    待补充 0.软件 Acronis Disk Director:用来对硬盘分区,将磁盘的一部分格式化成Linux可以识别的ext3格式 Ext2Fsd:因为Windows不能识别ext3格式的文件系统, ...

  8. UIView的alpha、hidden、opaque 深入

    转载自:http://blog.csdn.net/wzzvictory/article/details/10076323 UIView的这几个属性让我困惑了好一阵子,通过翻看官方文档和stackove ...

  9. js中原生对象、内置对象和宿主对象（转）

    本帖最后由 无解. 于 2012-9-9 12:13 编辑 <ignore_js_op> 这个图来自于<JavaScript语言精髓与编程实践>第三章P184页.最近在改第二版 ...

  10. 有两个数据库A和B，数据库A中有表a，如何把表a映射到数据库B中，sql 2005

    select * into B.dbo.a from A.dbo.a 就把表同步过去如果只同步表结构select * into B.dbo.a from A.dbo.a where 1<> ...