<!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. 分布式数据库Cobar

    Cobar简介: Cobar是关系型数据库的分布式处理系统,它可以在分布式的环境下看上去像传统数据库一样为您提供海量数据服务. 产品在阿里巴巴B2B公司已经稳定运行了3年以上. 目前已经接管了3000 ...

  2. 十二月总结-and-2016年终总结

    回顾 今天是2016的最后一天了,所以今天来做一个年终总结是最好不过的了.各种期末考试随着而来,也就意味着在工大的第一个学期马上结束了.回顾一下这一年所获得或者失去的一些东西: 2月份在家焦虑的等待着 ...

  3. Entity Framework 6新功能Logging/Store Procedure

    摘要 在Entity Framework6中有两个新的功能,DB Loggin和Stored Procedure的映射 Entity Framework 6已经从Beta版本来到了RC1版本,我们可以 ...

  4. spring，hibernate配置事务 beans.xml

    beans.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  5. Servlet程序开发-- 过滤器

    3种servlet:简单Servlet,过滤Servlet,监听Servlet 1. 简单Servlet:是作为一种程序所必须的开发结构保存下来的. 2. 过滤Servlet:过滤器使用的不是Http ...

  6. android中设置ListView的选中的Item的背景颜色

    ListView中没有默认的选择颜色,只有选择Item后的焦点颜色,鼠标点击时Item有颜色,放开鼠标后颜色也就没有了,要实现放开鼠标后选择项的背景还是有颜色的. 1.配置main.xml <? ...

  7. docker rancher 体验 (未完待续.....)

    docker rancher 体验 官方 githubhttps://github.com/rancher/rancher 环境说明: 10.6.0.14010.6.0.18710.6.0.188 修 ...

  8. Intellij Idea搭建java web项目(问题总结)

    这两天突发奇想下载了Intellij Idea,准备体验下这个传说中很强大IDE.工具下载就不多说了,网上一搜便知,博主是直接从Intellij官网下载的最新完整版,可惜的是只能使用30天,不过也差不 ...

  9. Android的init过程详解（一）

    Android的init过程详解(一) Android的init过程(二):初始化语言(init.rc)解析 本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 本文及后续几 ...

  10. 更改CI框架默认访问路径及去掉index.php

    下面是去掉index.php的操作 PHP CodeIgniter(CI)去掉 index.php - Langjun - 博客园 设置访问的默认路径是在