<!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. Zend Optimizer not installed可能原因及解决方法

    Zend Optimizer not installed可能原因及解决方法 Optimizer, Zend 在配置php服务器的时候,所有的东西都安装好了,就是浏览一个要求zend的程序的时候,总是提 ...

  2. rpm命令说明

    RPM命令常用参数 RPM的常规使用方法为rpm-?package.rpm,其中-?为操作参数(更多信息,请查阅帮助$manrpm): -q在系统中查询软件或查询指定rpm包的内容信息-i在系统中安装 ...

  3. java网络之tcp

    简单tcp传输 package pack; /* 演示tcp传输. 1,tcp分客户端和服务端. 2,客户端对应的对象是Socket. 服务端对应的对象是ServerSocket. 客户端, 通过查阅 ...

  4. java集合框架工具类Collections,集合的操作

    1 import java.util.*; public class asList { public static void main(String args[]) { // int arr[] = ...

  5. （转）MATLAB入门教程

    MATLAB入门教程   1．MATLAB的基本知识 1-1.基本运算与函数    在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: ...

  6. 半透命opacity:(0-1)，对于IE6版本不支持需要用filter：alpha（opacity=0-100）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 线段树扫描线 HDU 1542

    n个矩形 问他们覆盖的面积重复的就算一次 x数组存线段  然后根据横坐标排一下 z 线段树 l - r   就是1 ~ 2*n #include<stdio.h> #include< ...

  8. decimal 和 numeric (Transact-SQL)

    decimal(18,0)18是定点精度,0是小数位数.decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数. ...

  9. IOS之按钮控件--Button全解析及使用 分类： ios技术 2015-01-17 17:09 169人阅读 评论(0) 收藏

    IOS开发中伴随我们始终的 最常用的几个空间之一 -- UIButton 按钮,对于button今天在此做一些浅析,并介绍下主流用法以及常见问题解决办法. 首先是继承问题,UIButton继承于UIC ...

  10. panel的autoscroll属性不起作用

    已经设置panel的autoscroll属性为true,而且panel内 的控件也达到了应该滚动的地步,但是就是不见滚动条.这是为什么呢? 原因就是richtextbox的anchor属性设置了bot ...