Vue.js组件的通信之父组件向子父组件的通信
<!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组件的通信之父组件向子父组件的通信的更多相关文章
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- Vue.js学习（八）—— 树形结构下拉框组件vue-treeselect
vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持. 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- vue.js 跳转同一页面，传不同值，组件监听路由
watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },
- vue.js 创建组件 子父通信 父子通信 非父子通信
1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- Vue.js：轻量高效的前端组件化方案（转载）
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- pandas之groupby分组与pivot_table透视表
zhuanzi: https://blog.csdn.net/qq_33689414/article/details/78973267 pandas之groupby分组与pivot_table透视表 ...
- spark shuffle参数及调优建议（转）
原文:http://www.cnblogs.com/arachis/p/Spark_Shuffle.html spark.shuffle.file.buffer 默认值:32k 参数说明:该参数用于设 ...
- leetcode_650. 2 Keys Keyboard_dp
https://leetcode.com/problems/2-keys-keyboard/ 初始一个A,两种操作,复制当前所有A,粘贴,问得到n个A最少需要多少步操作. class Solution ...
- zuul 网关
1.网关的作用 网关可以拦截客户端所有请求,对该请求进行权限控制,负载均衡.日志管理.接口调用监控等操作. 1)网关对所有服务会话进行拦截 2)网关安全控制,统一异常处理,XXS.SQL注入 3)权限 ...
- wifi钓鱼之--Pumpkin
无线钓鱼 前言:请准备一块rt3070的外接网卡 Pumpkin是一款无线安全检测工具WiFi-Pumpkin的使用,利用该工具可以伪造接入点完成中间人攻击,同时也支持一些其它的无线渗透功能.旨在 ...
- 关闭 将jar或者aar发布到到mvn 中（用github作为仓库）， 通过gradle dependency 方式集成
使用Android Studio开发的用户,都希望通过maven远程仓库的方式来集成jar.aar文件,但是这些文件时如何发布的呢? 通常开发者都会将jar文件发布到sonatype上,以提供给其他开 ...
- python __future__ 使用
在开头加上from __future__ import print_function这句之后,即使在python2.X,使用print就得像python3.X那样加括号使用.python2.X中pri ...
- 06网络通信udp-tcp、正则
一． udp网络程序 1. udp网络程序-发送数据 1)创建客户端套接字 2)发送/接收数据 3)关闭套接字 from socket import * # 1. 创建udp套接字 udp_so ...
- Mysql 字符函数详解
MySql 所有字符串函数函数详解 ASCII(str) 返回str最左边第一位字符的ASCII编码,如果str为空,则返回 0 .如果str为NULL,则返回NULL -- 只返回a的ASCII编码 ...
- mysql事物隔离
1.读未提交(行锁) 会发生脏读,事物未提交被其他事物看到,未提交的数据为脏数据. 2.读已提交(行锁) 会发生不可重复读,事物开始时,只能看到已经提交了的事物修改. 3.重复读(行锁) 该级别保证了 ...