<!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 v-on:child-msg="handleIt"></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>",
               	     methods:{
               	     	csend:function(){
               	     		if(this.mess.trim()){
               	     			 this.$emit('child-msg',this.mess);
               	     			 this.mess='';
               	     		}
               	     	}
               	     }
               }

               return new Vue({
                    el:"#page",
                    data:{
                       arr:[],
                    },
                    methods:{
                      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. vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。

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

  8. React-Native子组件修改父组件的几种方式，兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  9. Vue 子组件传父组件

    vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用th ...

随机推荐

  1. cocos2d Android.mk自动添加类

    打开Android.mk修改以下代码: LOCAL_SRC_FILES := hellocpp/main.cpp \ ../../Classes/AppDelegate.cpp \ ../../Cla ...

  2. MVC工作流程

    1  浏览者 => 调用控制器,对它发出指令 2 控制器  => 按照指令选取一个合适的模型 3 模型    =>  按控制器指令取出相应的数据 4 控制器 =>  按指令选取 ...

  3. HDU - 1205 I NEED A OFFER!

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1203 题意: 该题要求得到一份offer的最大概率,在例子中的0.44 = 1-(1-0.2)*(1- ...

  4. 在MFC对话框中添加状态栏

    如果我们想实现在MFC对话框中添加状态栏显示,如何例如分状态栏为两列,第一列显示鼠标的当前位置,第二列显示当前的时间,(如上图). 1. 首先,打开在资源视图的String Table并添加两个ID: ...

  5. jsonp的简单实现

    jsonp: function(url, data, callback){ if( wfQuery.isFunction(data) ){ callback = data; data = {}; } ...

  6. 剑指offer替换空格

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. spring，hibernate配置事务

    1. 新建java project 2. 引入jar 3. src下新建package:com.web.model, com.web.dao, com.web.service, bean.xml 4. ...

  8. MiniProfiler找不到jquery的

    我一直在使用MiniProfiler来衡量网站性能.当我从1.9版本升级到2.0,它停止工作.我改变了命名空间从MvcMiniProfiler StackExchange.Profiling的.但是, ...

  9. SD卡读写扇区注意事项（转）

    源:http://blog.163.com/zhaojun_xf/blog/static/30050580201151410635516/ 在调试SD卡时,大家都喜欢使用扇区进行验证.也就是说,一般都 ...

  10. 关于Eclipse无法生成class文件的问题

    今天调试东西的时候发现怎么都无法build 遂用Eclipse里的clean功能 打算重新编译一下结果所有的class文件全部消失了 重新打包发包也不行 经过查找后得到方法:把properties属性 ...