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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- sql语句中截取字符串
今天在开发过程中因为要用到合并单元格,在程序里实现了以后,查出来的数据太长,都把格式撑大了,后来想想可以在sql语句查询的时候就截取,就去网上找了一下,挺好用,就转了过来: 合并单元格: /// &l ...
- Method Dispatch in Protocol Extensions
We learned in the Protocol-Oriented Programming session at WWDC 2015 that Swift uses two different d ...
- Laravel Mix编译前端资源
目前项目是使用的vue+laravel来写的,其中laravel和vue分别放了一个目录,但是这样有个问题,那就是vue需要经常更新,不然运行项目会经常出现各种问题,这里就看了看laravel的文档, ...
- MIPS的寄存器、指令和寻址方式的分类
MIPS的32个寄存器 助记符 编号 作用 zero 0 恒为0 at 1 (assembly temporary)保留给汇编器使用 v0,v1 2-3 (values)子程序返回,即函数调用时的返回 ...
- CAD交互绘制样条线（com接口）
在CAD设计时,需要绘制样条线,用户可以设置样条线线重及颜色等属性. 主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数.详细说明如 ...
- JavaScipt30(第二十二个案例)（主要知识点：getBoundingClientRect）
这是第二十二个案例,这个例子实现的是鼠标移入a标签时,将其高亮. 附上项目链接: https://github.com/wesbos/JavaScript30 以下为注释后的源码: <scrip ...
- dedecms部分文章出现读取附加信息出错的解决办法
问题: 估计是新版本开发的时候,没有考虑旧版,文章内容为空的新闻,新版不在允许文章内容为空的新闻,这样旧版的内容为空的新闻升级后将无法再编辑. 解决:你可以对如下文件进行如下修改:article_ed ...
- 在计算机中简单的hello程序的运行
我之前很好奇就是你所写的代码到底是如何在计算机中执行的,到底是怎样开始,从哪里开始,在哪里执行,到哪里结束,之间到底是怎么的一个过程,带着这些问题,逐渐看这方面的书籍,最近买的<深入理解计算机系 ...
- 获取本地验证码cookie
window.document.onkeydown = function (evt) { evt = (evt) ? evt : window.event; if (evt.keyCode) { if ...
- cacheStorage缓存及离线开发
案例地址:https://zhangxinxu.github.io/https-demo/cache/start.html 我们直接看一个例子吧,如下HTML和JS代码: <h3>一些提示 ...