<!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. 【spring boot】SpringBoot初学（2） - properties配置和读取

    前言 只是简单的properties配置学习,修改部分"约定"改为自定义"配置".真正使用和遇到问题是在细看. 一.主要 核心只是demo中的: @Proper ...

  2. C#中：函数访问级别对函数形参访问级别的约束

    Inconsistent accessibility: parameter type 'Program.CommandLineInfo' is less accessible than method ...

  3. Effective C++笔记之Item49【了解new-handler的行为】

    //---------------------------------------------------------// //------------------------------------ ...

  4. php获取Linux网卡信息

    $data = exec("/sbin/ifconfig"); var_dump($data); 注意:有时候这种方式获取不到,应该是权限问题 在/var/rootP文件中添加ro ...

  5. 配置F5 负载均衡（转）

    转自<网络运维与管理>201406-11 配置F5交换机的问题在于,与平时所学的交换机.路由器思路完全不同,拿到设备后,完全不知如何下手. 网络拓扑图如下: 两台web服务器对外提供服务, ...

  6. 使用FusionCharts出柱状图和饼状图

    在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...

  7. PAT (Advanced Level) 1062. Talent and Virtue (25)

    简单排序.题意较长. #include<cstdio> #include<cstring> #include<cmath> #include<queue> ...

  8. Python3基础 函数 关键字参数 的示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  9. Maven项目中提示：Eclipse “cannot be resolved to a type” error

    我的解决办法是这个: 临时解决方法是:Clean项目 ********百度到的其他解决办法,统一归纳此处****************** (1)jdk不匹配(或不存在) 项目指定的jdk为“jdk ...

  10. Dojo和jQuery区别

    Dojo类似jQuery,且用法也差不多,但是Dojo属于重量级的框架,自带的表单验证,Grid,tree等控件. 在选择上,个人觉得轻量级的框架比较好,因为方便引入第三方的,有特色的库. 就像选择S ...