<!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. ARP及RARP简介

    1.概念 ARP(Address Resolution Protocol) 地址解析协议 RARP(Reverse Address Resolution Protocol) 反向地址解析协议 2.AR ...

  2. 转：Selenium借助AutoIt识别上传（下载）详解

    AutoIt目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动 ...

  3. Django: 之Model、Cookis、Session

    到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用MySQLdb来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 im ...

  4. Android -----paint cap join 理解 ，paint画笔形状设置

    引自:http://www.2cto.com/kf/201501/370215.html 网上查了很多资料,对paint的里面的枚举类cap join讲的不是很透彻.在这里自己做一个比较深入的研究. ...

  5. HDU 5170 GTY's math problem

    数学题,a的b次方和c的d次方都很大,直接判断是做不出来的. 如果我们能找到一个函数F(x)是单调的,而F(X)的值又比较好算,那么可以通过比较F(X)的大小来判断自变量的大小. 令F(X)=log( ...

  6. Qt5：Qt文件操作类 QFile

    在QT中,操作文件一般不使用C++提供的文件操作类 , 因为操作文件的时候,要用到C++提供的 string 类,而在QT中使用的是Qt自己实现的一个string类 QString .在Qt中使用C+ ...

  7. Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'

    Eclipse ADT Unexpected exception 'Cannot run program' up vote 8 down vote favorite 4 I have installe ...

  8. 用curl测试rest服务时，

    query parameter总是只能得到第一个,原来是需要加引号,否则url中的&符号被理解为命令行中的后台执行.

  9. C语言5种存储区域

    C语言5种存储区域 转发至:http://www.mamicode.com/info-detail-927635.html 系统为了管理内存 把内存划分了几个区域 1> 栈区 栈区之中的数据在栈 ...

  10. HttpClient 教程 (二)

    第二章 连接管理 HttpClient有一个对连接初始化和终止,还有在活动连接上I/O操作的完整控制.而连接操作的很多方面可以使用一些参数来控制. 2.1 连接参数 这些参数可以影响连接操作: 'ht ...