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

  <template id="parentComp">
    <div>
      I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}}
      <hr>
      <child :m1="msg1" :m2="msg2"></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'
        }
      },
      props:['m1','m2']
    };

    let parent={
      template:'#parentComp',
      data(){
        return {
          mgs:'parent Data',
          msg1:'the first parent Data',
          msg2:'the second parent Data'
        }
      },
      components:{
        child
      },
    };

    window.onload=function(){
      new Vue({
        el:'#app',
        components:{
          parent
        }
      });
    }

    /*子元素向父元素通信关键总结:
      1:子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据
      2:在嵌套的子元素(使用时)上:<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
    */
  </script>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>

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

  1. Vue.js 获得兄弟元素,子元素,父元素(DOM操作)

    e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素 ...

  2. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  4. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  5. vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

    vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

  6. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

  8. Vue.js 源码分析(二十七) 高级应用 异步组件 详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...

  9. Vue.js 学习笔记之六:构建更复杂的组件

    在掌握了如何构建与编译 Vue 组件的基础知识之后,接下来就可以试着来构建一些更具有实际用处的复杂组件了.为了赋予组件更具实用性的后面,首先要做的就是让这些组件具备监听用户自定义事件的能力,并且允许用 ...

  10. 在子组件中触发事件,传值给父组件-vue

    1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...

随机推荐

  1. LeetCode 三角形最小路径和

    给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和为 11 ...

  2. 【实用工具】Teleport Pro爬取整个网站镜像到本地

    1. 使用Teleport Pro可以完全或部分下载一个网站上的内容,在硬盘上创建一个与原网站完全相同的镜象,使用户能够离线浏览 Teleport Pro的安装以及基本使用 在菜单栏Project下得 ...

  3. [图文] Fedora 28 使用 Virt-Manager 制作并优化QCOW2镜像——Windows 10 1709

    实验说明: 云计算的发展使得桌面上云,windows 10就必不可少,这一章就如何制作QCOW2镜像文件并优化进行说明. 实验环境: 宿主机系统   :Fedora 28 WorkStation 虚拟 ...

  4. vue ssr

    https://mp.weixin.qq.com/s/v1c69bJ5PxGcqt-ZU4FVXw https://juejin.im/entry/590ca74b2f301e006c10465f h ...

  5. 【git】不检查特定文件的更改情况

    .gitignore只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的.正确的做法是在每个clone下来的仓库中手动设置不要检查特定文件的更 ...

  6. 项目之socket

    客户端socket 客户端套接字完成的任务很统一,发送请求,接收请求结果 可以封装成一个方法 使用的tcp协议存在粘包问题,故需要自定义报头 import json import struct #项目 ...

  7. “程序设计与算法训练”课程设计:“BP神经网络的实现”(C++类封装实现)

    一 题目: 71 BP神经网络的实现: 利用C++语言实现BP神经网络, 并利用BP神经网络解决螨虫分类问题: 蠓虫分类问题:对两种蠓虫(A与B)进行鉴别,依据的资料是触角和翅膀的长度,已知了9支Af ...

  8. MySQL常用命令(三)---最值的搜索

    表结构存储数据如下: 需求如下: 1.每项物品的的最高价格是多少?(下面这个查询语句的结果集中你会发现 经销商(dealer)的值不对,第二个语句就是对的)2.对每项物品,找出最贵价格的物品的经销商. ...

  9. xhtml css 漏 整理

    1)文档类型 代码最上部有如下这句话: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  10. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...