<!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. 关于Qt模态框总汇

    转载请注明出处:http://www.cnblogs.com/dachen408/p/7285710.html 父窗体为QMainWindow: 当子窗体为: 1.QWidget,需要设置 this- ...

  2. widows&l ubuntu 简单互联——基于samba

    只是简单访问对方文件,就不上SSH了 windows端访问ubuntu: 要共享的文件夹右键 → 本地网络共享:共享此目录. 会提示你安装一个协议包,即samba(但此处默认安装包不完整),安装成功后 ...

  3. fedora安装gcc

    查看gcc版本 gcc --version 命令行编译 g++ -std=c++11 -o main main.cpp 查看程序是否编译成功 echo $? 返回0表示编译成功 新版的Fedora(2 ...

  4. at, batch, atq, atrm - 排队、检查或删除以后要执行的作业

    总览 at [-V] [-q 队列] [-f 文件] [-mldbv] 时间 at -c 作业 [作业...] atq [-V] [-q 队列] [-v] atrm [-V] 作业 [作业...] b ...

  5. 表单文件上传编码方式（enctype 属性）

    enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 如下: <form action="upload.php" method="post&quo ...

  6. MySQL系列(一)--数据类型

    如何选择优化的数据类型: 1.通常更小的更好 相同级别的数据类型,选择占据空间更小的数据类型.更小的数据类型通常更快,因为占用更少的磁盘.内存和CPU缓存,处理时需要的 CPU周期也更少,但是要确保需 ...

  7. 十六进制字符串转byte (无符号字符串）；

    方法一: unsigned char* hexstr_to_char(const char* hexstr) { size_t len = strlen(hexstr); IF_ASSERT(len ...

  8. Vue完成TodoList案例

    写一个简单的TodoList的更实用(文末有彩蛋). 一,使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件,方法: npm install -g vue- ...

  9. Java C

    先说一下自己叫什么,免得面试的人张冠李戴. 介绍自己有几个方面:1学什么专业的那方面学的过硬,可以说的具体点. 2以前做过什么.(这家公司要你肯定是和你的经历有关.) 3现在来这家公司的目的是什么(当 ...

  10. [PyTorch] rnn,lstm,gru中输入输出维度

    本文中的RNN泛指LSTM,GRU等等 CNN中和RNN中batchSize的默认位置是不同的. CNN中:batchsize的位置是position 0. RNN中:batchsize的位置是pos ...