<!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. android 5.0新特性学习--视图阴影

    android 5.0的视图阴影主要是体验出层次性,就是在一个物体上面叠加上一层的设计,而这种设计就是除了传统的,x,y的纸面层,还有就是透过纸面的z轴的层次设计. elevation: 高度,静态属 ...

  2. 关于VC中的错误处理

    include <exception> try {} cache(exception &e) { cout<<e.what()<<endl; }     但 ...

  3. nested query for "pat2" table

    mysql> select t.appln_id, t.filing_date, t.appln_kind, t.people, GROUP_CONCAT(pu.publn_kind) from ...

  4. 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 ...

  5. 【转载】区间DP

    http://www.cnblogs.com/zsboy/archive/2013/03/08/2950261.html 博客园 首页 新随笔 联系 订阅 管理 定义区间DP   区间动态规划问题一般 ...

  6. linux下的文本处理命令sed&awk&grep

    Sedsed 是个精简的.非交互式的编辑器.他能执行和编辑vi和emacs相同的编辑任务.sed编辑器不提供交互使用方式:只能在命令行输入编辑命令.指定文件名,然后在屏幕上察看输出.sed编辑器没有破 ...

  7. 在Gridview编辑时添加DropDownList控件并设置默认值

    页面代码: <asp:GridView ID="GridView1" runat="server"             AutoGenerateCol ...

  8. ZOJ3944People Counting<暴力/枚举>

    题意:输入一张照片,给出人物的特征,判断有多少个人. .O. /|\ (.) 思路:按照3*3的图统计,只要有一个点符合就加1 #include<cstdio> #include<i ...

  9. UITableView 性能优化

    网络图片异步加载,SDWebImage. 文字直接 drawInRect/drawAtPoint 绘制,参考 ABTableViewCell,AdvancedTableViewCells. 本地图片也 ...

  10. db2 sqlcode

    DB2错误信息(按sqlcode排序) sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被 ...