<!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. Git学习 -- 标签管理

    新建标签 git tag <tagname>   默认为HEAD,也可以指定一个commit id eg.   git tag v0.9  git tag v1.0 31aa59c git ...

  2. 转：Selenium-Grid工作方式

    Selenium-Grid版本 selenium-grid分为版本1和版本2,其实它的2个版本并不是和selenium的版本1和2相对应发布的[即selenium-grid2的发布比selenium2 ...

  3. elasticearch 安装

    1.elasticsearch需要安装jdk1.7以上 2.在ubuntu下不能以root运行,需要建立专门账号 添加组 root@ubuntu:~/Downloads/elasticsearch-/ ...

  4. android--listview设置高度

    android:layout_height="25dp"这么设置根本就没有用． 我们必须要设置android:minHeight="25dp"这样才行．

  5. UVALive 6885 Flowery Trails

    两次SPFA #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...

  6. SORT函数的使用方法（转载）

    sort函数的用法(转载出处:http://blog.sina.com.cn/s/blog_6439f26f01012xw3.html) 做ACM题的时候,排序是一种经常要用到的操作.如果每次都自己写 ...

  7. Struts2语法--Ognl

    OGNL: Object Graph Navigation Language index.jsp: <body> 访问属性 <a href="<%=contextPa ...

  8. Ubuntu里字符编码设置

    Ubuntu里字符编码设置   Ubuntu系统在默认的状况下只支持中文UTF-8编码,但是我们写的一些文档,还有java代码编译时采用gbk编码.所以需要修改.步骤如下:  www.2cto.com ...

  9. docker安装hadoop

    docker为hadoop的云化带来了极大便利,安装和应用也会更快更方便.进入正题: docker search hadoop 将会看到如下结果: INDEX NAME DESCRIPTION STA ...

  10. Android------自定义ListView详解

    引自:http://www.cnblogs.com/phonegap/archive/2011/04/28/2535732.html 在这里我就对自定义ListView进行讲解下吧,直入真题吧,首先我 ...