Vue.js组件的通信之子组件向父组件的通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>componentChildToParentCommunication</title>
<script src="js/vue.js"></script>
</head>
<template id="parentComp">
<div>
I am parent component:{{msg}},The Data from child:{{msg1}},{{msg2}}
<hr>
<child :m1="msg1" :m2="msg2"></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'
}
},
props:['m1','m2']
};
let parent={
template:'#parentComp',
data(){
return {
mgs:'parent Data',
msg1:'the first parent Data',
msg2:'the second parent Data'
}
},
components:{
child
},
};
window.onload=function(){
new Vue({
el:'#app',
components:{
parent
}
});
}
/*子元素向父元素通信关键总结：
1：子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据
2：在嵌套的子元素(使用时)上：<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>;
*/
</script>
<div id="app">
<parent></parent>
</div>
</body>
</html>
Vue.js组件的通信之子组件向父组件的通信的更多相关文章
- Vue.js 获得兄弟元素，子元素，父元素（DOM操作）
e.target 是你当前点击的元素 e.currentTarget 是你绑定事件的元素 e.currentTarget.previousElementSibling.innerHTML 获得点击元素 ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- Vue 父组件向子组件传值，传方法，传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- vue $parent 的上一级 有可能不是父组件，需要好几层$parent 如果这样 还不如用 this.$emit
vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- Vue.js 学习笔记之六：构建更复杂的组件
在掌握了如何构建与编译 Vue 组件的基础知识之后,接下来就可以试着来构建一些更具有实际用处的复杂组件了.为了赋予组件更具实用性的后面,首先要做的就是让这些组件具备监听用户自定义事件的能力,并且允许用 ...
- 在子组件中触发事件，传值给父组件-vue
1.通过$emit触发事件 在子组件<x-test>中触发事件: <button @click="toSearchProduct()">搜索</but ...
随机推荐
- BZOJ4513 SDOI2016 储能表 记忆化搜索（动态规划）
题意: 题面中文,不予翻译:SDOI2016储能表 分析: 据说有大爷用一些奇怪的方法切掉了这道题%%%%% 这里用的是大众方法——动态规划. 其实这是一道类似于二进制数位dp的动态规划题,(但是实际 ...
- MariaDB数据库（四）
1. 数据库备份与恢复 数据库备份用命令mysqldump ,MySQL的备份文件一般以.sql结尾,做到见名知意 #备份testdb数据库重定向为testdb.sql文件, [root@localh ...
- Controller View 模式
参考:https://blog.andrewray.me/the-reactjs-controller-view-pattern/ Flux参考:http://www.cnblogs.com/hell ...
- js,jq,php使用正则方法
1.js使用正则表达式案例: <script> var str=”543535364565@qq.com”; var res=“/^\d*@(QQ|qq|136)\.(com|cn)$/” ...
- Django ORM字段和字段参数
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- 排序算法C语言实现——堆排序
/*堆排nlog(n)*//*堆排复杂度分析1.建堆((n*log(n))/2) 循环n/2次,每次调用HeapAdjust函数 HeapAdjust内部循环log(n)2.调整堆(((n ...
- http过程
当在浏览器里输入URL地址时,http的通讯过程: 1) 连接 DNS解析:URL——>DNS服务器(找到返回其ip,否则继续将DNS解析请求传给上级DNS服务器) Socket连接:通过IP和 ...
- H5系列之地理位置（必知必会）
H5之地理位置必知必会 [02]概念 规范地址:http://www.w3.org/TR/geolocation-API/ HTML5 Geolocation(地理定位)用于定位用 ...
- 百度蜘蛛IP段分析
大家进行网站日志分析的时候,常见到很多不同IP段的百度蜘蛛,为了方便大家更好的进行日志分析,下面列举了百度不同IP段常见蜘蛛的一些详情情况,及所谓的降权蜘蛛,沙盒蜘蛛,高权重蜘蛛等等 下面的百度蜘蛛I ...
- 鼠标移动或者鼠标点击div消失不见排查
点击事件,导致某div或者容器样式隐藏,如果不能直接发现click事件绑定,那么首先排查哪些方法在控制div的样式, 然后看一看哪些方法在调用修改样式的方法. 然后再排查什么在调用修改样式的方法的方法 ...