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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- 掌握Spark机器学习库-07-线性回归算法概述
1)简介 自变量,因变量,线性关系,相关系数,一元线性关系,多元线性关系(平面,超平面) 2)使用线性回归算法的前提 3)应用例子 沸点与气压 浮力与表面积
- 在action中将字符串、对象、list集合保存到值栈中，在jsp页面中获取的方法
转自:csdn 封装对象User,属性有id,username,email等1.1:在action中将字符串保存到值栈中 1.1.1 获取值栈对象 ValueStack stack ...
- Can't find bundle for base name messages.AndroidJpsBundle, locale zh_CN
从http://www.android-studio.org/网站上下载了一个Android Studio 3.0的非安装版本(android-studio-ide-171.4408382-wind ...
- NOT IN、NOT EXISTS的相关子查询改用LEFT JOIN--sql2000性能优化
参考文章:SQL SERVER性能优化综述(很好的总结,不要错过哦) 数据库:系统数据库 子查询的用法 子查询是一个 SELECT 查询,它嵌套在 SELECT.INSERT.UPDATE.DELET ...
- AIX RAC 安装失败完全卸载
1,删除软件安装目录 rm -rf /u01/app 2,删除以下目录内容 rm -rf/tmp/.oracle rm -rf/tmp/* rm -rf/tmp/ora* rm -rf/var/tmp ...
- 5-Java-C（单位分数）
题目描述: 形如:1/a 的分数称为单位分数. 可以把1分解为若干个互不相同的单位分数之和. 例如: 1 = 1/2 + 1/3 + 1/9 + 1/18 1 = 1/2 + 1/3 + 1/10 + ...
- MySQL索引的用处
MySQL索引在MySQL数据库中,可以有效提高查询的效率,尤其是查询数据量非常大时,效果更为明显,往往能使查询速度加快成千上万倍. MySQL索引是很重要的概念,应用的范围非常广.那么,MySQL索 ...
- Django 外键ForeignKey中的on_delete
当你在Django中删除了一个有着外键关联的数据时,比如一个作者和他名下的所有的书的信息,书的外键是作者(一个作者可有好多本书),当你把作者的信息从数据库中删除时,Django提供了一下几个参数来对作 ...
- 第2节 mapreduce深入学习：7、MapReduce的规约过程combiner
第2节 mapreduce深入学习:7.MapReduce的规约过程combiner 每一个 map 都可能会产生大量的本地输出,Combiner 的作用就是对 map 端的输出先做一次合并,以减少在 ...
- 安装exe4j出现jre不匹配问题
在安装exe4j 客户端,提示如下错误: 提示的错误信息大意如下:install4j安装时,在本系统中没有找到JRE(JavaRuntime Environment)(版本要求:最低1.5,最高1.6 ...