vue20 父子组件数据交互
子组件使用父组件数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<!-- vue-devtools 调试工具 github 搜索vue-devtools，最下面Get it on the Chrome Web Store.-->
<div id="box">
<aaa>
</aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{ //组件嵌套
template:'<h2>我是aaa组件</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h3>我是bbb组件</h3>'
}
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'<h2>我是aaa组件{{msg}}</h2><bbb></bbb>',
components:{
'bbb':{//访问不到,子组件也没法访问父组件数据
template:'<h3>我是bbb组件->{{msg}}</h3>'
}
}
}
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2"></bbb> <!--aaa模版中可以访问aaa的data-->
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa', //aaa组件的模版
components:{
'bbb':{
props:['mmm'],
template:'<h3>我是bbb组件->{{mmm}}</h3>' //bbb组件的模版
}
}
}
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb> <!--aaa模版中可以访问aaa的data-->
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:['mmm','myMsg'],//js里面不能用横线要驼峰
template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>' //子组件访问父组件的data
}
}
}
}
}); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div> <template id="aaa">
<h1>11111</h1>
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:{
'mmm':String,
'myMsg':Number
},
template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
}
}
}
}
}); </script>
</body>
</html>
父组件使用子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<aaa>
</aaa>
</div>
<!--
子组件把自己的数据，发送到父级,vm.$emit(事件名,数据);
child-msg事件bbb是可以接收的，
接收v-on:简写@，接收事件执行一个函数get。 vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了
-->
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);//this是vm
}
}
}
}
}
}
}); </script>
</body>
</html>
vue20 父子组件数据交互的更多相关文章
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- Vue2.x之父子组件数据传递
父传子,并且通过fatherEvent接收子组件传过来的值 <template> <div class='father'> <Son :fatherData=" ...
- [vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...
- react父子组件数据传递
子传父 1.首先父组件设定一个自定义函数 getChildDatas = (values) => { //...业务代码 } 2.将该函数暴露在子组件的引用上 <Child getChil ...
随机推荐
- luogu P1375 小猫(卡特兰数）
题意 (n<=200000) 题解 把DP转移方程写出来,这不是卡特兰数吗?然后就解决了. 做完这题我发现 DP真是一个好东西. (公式连乘所以中间要加mod要不爆longlong了) #inc ...
- 越努力越幸运--动态数组vector
最近回忆山哥写的stl,觉得很好用,也写了一份. 感谢群里的大佬帮忙review,还是很多的问题的. code:https://github.com/HellsingAshen/vector_c.gi ...
- GIT配置多用户
在公司工作的时候有时候想提交一点代码到github上,然后一台电脑上就需要配置两个账号分别访问github和公司的gitlab 1. 分别生成两个key 为什么要生成两个key的原因我也不清楚,望路过 ...
- JavaScript（14）jQuery（JavaScript 库）
JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...
- web集群中经常使用的session同步解决方式及对照
随着站点的功能越来越多,用户量越来越庞大,单节点模式已经严重不能支撑整个系统的正常运作,轻则用户页面訪问时间越来越慢.重则就会导致整个系统瘫痪.这时候 就须要优化或调整眼下的架构,大部分人就会採用各种 ...
- JavaScript编程随笔
尽管说用JS非常多年了,可是却一直停留在肤浅的阶段,对JS的机制原理依旧是一知半解,比如:闭包.尽管能说出一二.却不能说出三四,确实羞愧.近期恶补一番.并将比較与大家分享,希望对大家有些帮助. 闭包 ...
- 4、python序列对比
1.列表:[ ],杂(什么都可以放进去),有序,可变 2.元组:(),有序,不可变 3.字典:{ },键值对,无序,可变 4.集合:{ },不可重复,无序,可变
- CSS透明度设置支持IE，Chrome，Firefox浏览器
CSS文件里设置例如以下就可以 filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome.Firefox
- TCO14 1B L3: EagleInZoo, dp，tree
题目:http://community.topcoder.com/stat?c=problem_statement&pm=13117&rd=15950 看到树,又是与节点有关,通常是d ...
- 海思 3520D 移植Qt4.5.3 一
一.移植Qt4.5.3 1.获得 Qt4.5.3 的源码Qt4.5.3源码的原始包 qt-embedded-opensource-src-4.5.3.tar.gz 将其复制到 /opt 下, ...