<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>componentParentChildCommunication</title>
    <script src="js/vue.js"></script>
  </head>

  <template id="parentComp">
    <div>
      I am parent component:{{msg}},The Data from child:{{msg2}}
      <hr>
      <!-- <child @自定义事件名="父方法"></child> -->
      <child @child="parentFn"></child>
    </div>
  </template>

  <template id="childComp">
    <div>I am child component:{{msg}}</div>
  </template>
  <body>

  <script>
    let child={
      template:'#childComp',
      data(){
        return {
          msg:'child Data'
        }
      },
      mounted(){
      /*this.$emit('自定义事件名',数据);*/
        this.$emit('child',this.msg);
      }
    };

    let parent={
      template:'#parentComp',
      data(){
        return {
          msg:'parent Data',
          msg2:''
        }
      },
      components:{
        child
      },
      methods:{
        parentFn(data){
          this.msg2=data;
        }
      }
    };

    window.onload=function(){
      new Vue({
        el:'#app',
        components:{
          parent
        }
      });
    }
    /*父元素向子元素通信关键总结:
      1:在嵌套的子元素(使用时)上:<child @自定义事件名="父方法"></child>;
      2:子元素在加载完成的钩子函数(mounted)上加一个方法:this.$emit('自定义事件名',数据);
      3:父元素上的方法:父方法名(data){...}
    */
  </script>

  <div id="app">
    <parent></parent>
  </div>
  </body>
</html>

Vue.js组件的通信之父组件向子父组件的通信的更多相关文章

  1. Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...

  2. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  3. Vue.js学习(八)—— 树形结构下拉框组件vue-treeselect

    vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...

  4. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  5. vue.js 跳转同一页面,传不同值,组件监听路由

    watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },

  6. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  8. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  9. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  10. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

随机推荐

  1. CCF|跳一跳

    import java.util.Scanner; public class Main { public static void main (String[] args) { Scanner scan ...

  2. Java序列化技术性能分析(JDK原生与Protostuff)

    熟悉Java的朋友应该知道Java有一个叫序列化的技术,即把一个Object转换为可保存,可传输的流数据.相应的,同时存在反序列化,即将流数据转换为Object类,而在转换的过程中,该Object保持 ...

  3. UVALive 4128 Steam Roller 蒸汽式压路机(最短路,变形) WA中。。。。。

    题意: 给一个由n*m个正方形格子组成的矩形,其中每个格子的边都是可以走的,长度给定,规定:如果在进入该路前需要拐弯,或者走完该路需要拐弯,都是需要付出双倍距离的(每条路最多算2倍).问从起点到终点的 ...

  4. vue动态设置页面title方法

    第一种方法 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wech ...

  5. bat运行当前路径下程序

    批处理中获取当前路径的方法可能有好几种,具体有几种我没有研究过,本文只是对其中的两种之间的差别进行简单说明 本文涉及的两个当前路径标示为:%cd%.%~dp0 注:我的系统是win7旗舰版,其它系统没 ...

  6. MFC如何设置窗口最前

    首先,放到最前 this->SetWindowPos(&wndTopMost,0,0,0,0,SWP_NOMOVE|SWP_NOSIZE);//使窗口总是在最前面 this->Se ...

  7. 13C++异常处理

    异常处理 14.1.1 异常处理的任务 程序编制者不仅要考虑程序没有错误的理想情况,更要考虑程序存在错误时的情况,应该能够尽快地发现错误,消除错误. 程序中常见的错误有两大类: 语法错误和运行错误.在 ...

  8. 问题:hdfs管理界面:Summary部分,Configured Capacity: 0 B

    hdfs管理界面:Summary部分,Configured Capacity: 0 B.正常应该不是0,而是显示系统分配给hdfs的剩余容量. 原因:NameNode的clusterID和DataNo ...

  9. JavaScript:JSON 和 JS 对象

    区别 JSON(JavaScript Object Notation)仅仅是一种数据格式(或者叫数据形式).数据格式其实就是一种规范,按照这种规范来存诸和交换数据.就好像 XML 格式一样. 区别 J ...

  10. 文件 jq 传到后台

    XMLHttpRequest Level 2 添加了一个新的接口——FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0 ...