<!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. C++笔记(仅C++特性,需C语言基础)

    C++复习笔记一(类的声明定义应用与构造函数析构函数部分)const在C语言中是"不能被改变值的变量",而在C++种子则是"一种有类型描述的常量",常量必须初始 ...

  2. PHP必知必会

    MQ(消息队列) 消息队列主要用于以下场景: 1. 上传图片,用户需要迅速反馈,把上传图片的后续操作交给consumer 2. A用户对B用户发消息 3. 日志记录,APP发生的任何警告错误日志都要被 ...

  3. PAT 乙级 1033

    题目 题目地址:PAT 乙级 1033 题解 本题一直有一分的样例点过不了,原因在于用了cin接收输入的字符…… 问题在于:如果用cin输入,无法接收无坏键的情况的输入,需要getline作为输入:这 ...

  4. docker系列之基础命令-2

    一.查看本地镜像 docker images 二.需要基础的镜像两种方式 1.docker pull centos 可以直接拉起镜像 2.直接用xshell导入就行,docker load -i  加 ...

  5. getComputedStyle与currentStyle获取元素当前的css样式

    CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...

  6. 安装tesserocr的步骤和报错RuntimeError: Failed to init API, possibly an invalid tessdata path解决办法

    1,首先下载合适的tesseract-ocr的版本 2,然后安装到这一步注意要勾选这一项来安装OCR识别支持的语言包,这样OCR就可以识别多国语言,然后就可以一直点击下一步完成安装. 3,安装tess ...

  7. STM32L0开发——ADC多通道采集，IDE和IAR开发注意事项

    keil开发L0系列是免费的,官方提供许可的.因此建议Keil开发,L011F3由于flash只有8K,因此不建议HAL库,建议使用cubemx+LL(或snippets库).0.起初,可以参考官方库 ...

  8. Delphi第三方控件安装卸载指南

    基本安装1.对于单个控件,Componet-->install component..-->PAS或DCU文件-->install; 2.对于带*.dpk文件的控件包,File--& ...

  9. 长沙理工大学第十二届ACM大赛-重现赛

    年轮广场 时间限制:1秒 空间限制:131072K 题目描述 在云塘校区,有一个很适合晒太阳的地方————年轮广场 年轮广场可以看成n个位置顺时针围成一个环. 这天,天气非常好,Mathon带着他的小 ...

  10. 更新yum源导致yum不可用

    当安装和yum配置相关的包后报yum模块找不到 yum install -y yum-utils device-mapper-persistent-data lvm2 yum list|grep yu ...