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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- git ---回到过去
git命令回顾 git checkout /git reset -git reset HEAD~ //~代表回滚到第几个版本.. 有多个的话可以在~后面加个数字 git reset --mixe ...
- JS 中的 JSON
JSON是JavaScript Object Notation的缩写,它是一种数据交换格式. 在JSON出现之前,大家一直用XML来传递数据.因为XML是一种纯文本格式,所以它适合在网络上交换数据.X ...
- vba根据部门分别汇总不同部门下的人员不同培训内容的时长总计,多条件求和
Option Explicit Sub yy() Dim d, arr, s$, i&, m&, w$ Set d = CreateObject("Scripting.Dic ...
- LOL喷子专用自动骂人工具,2018更新完整版！
软件截图 软件说明: 先进入游戏 打开程序 Z开启/C关闭 下载地址:密码 yjnm
- Laravel Passport认证-多表、多字段解决方案
Laravel Passport认证-多表.多字段解决方案 2018年08月19日 09:31:01 醉卧码场君莫笑 阅读数:1632 1. 概述 API 通常使用令牌(token)进行认证并且在 ...
- php 阿里云短信验证码
阿里云短信服务:https://dysms.console.aliyun.com 1.准备 1.1.创建签名.模板 1.2.创建.使用阿里云秘钥 地址:https://usercenter.conso ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
- LINUX：解压问题tar: Child returned status
解压某个文件时 #tar -zxvf xxxxx.tar.gz 出现下面的错误提示: gzip: stdin: not in gzip formattar: Child returned status ...
- JavaSE-17 泛型
学习要点 泛型接口 泛型类 泛型方法 多参数泛型类 泛型类的继承 泛型的定义 允许在定义类.接口.方法时使用类型形参,类型形参将会在声明变量.创建对象或者调用方法时候动态指定. 泛型接口 1 定义 ...
- 2. 区分散列的 undef 值， 和手动赋值 0 不一样。1. 使用exists函数，散列中有这个键（必须是keys %hash 有这结果），则返回真值，
2. 123 my %vertical_alignment; 124 $vertical_alignment{"subscripting"} = 0; 125 unle ...