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 ...
随机推荐
- 51nod 麦克打电话（AC自动机+树状数组）
SAM+线段树合并的裸题. 但我们讨论AC自动机的做法. 先建出AC自动机.考虑询问在[a,b]中出现的次数就是\([1,b]\)的出现次数-\([1,a-1]\)的出现次数.把询问离线.然后我们要求 ...
- springboot ajax返回html
因为拦截器 或者是 shiro 拦截登陆接口
- python登录注册改良版
#在执行本脚本的时候,需要先注册,否则会报字符串不匹配sum=3while True: #如果条件为真,则一直循环 print("先注册,在登录") print("1.注 ...
- centos7 jumpserver 部署和使用手册（二）
前面已经介绍了jumpserver的部署,基于这篇部署文档,下面介绍下部署完成后的的功能使用: 一.系统设置 1.1根据提供的帐号密码(admin/admin)登录jumpserver 修改 url ...
- es-for-Laravel: Composer 包安装, Laravel 最简单的方式操作 Elasticsearch
composer 安装:composer require ethansmart/es-for-laravel github 地址:https://github.com/roancsu/es-for-l ...
- 如何配置任意目录下Web应用程序
1,首先创建一个Web项目,tomcat 7, JDK 1.8 2,创建Web项目并部署到tomcat服务器下运行的步骤和方法: 在Eclipse下创建一个JAVA project 在JAVA项目下创 ...
- Github README.md中添加图片
1.先把图片上传到你的项目中:然后在github网站上按路径打开图片,如下打开的图片链接: 2.复制图片的地址 3.然后在README.md写上:  注意 ...
- LaTeX 简介与安装
1 LaTeX 简介 Leslie Lamport 开发的 LaTeX 是当今世界上最流行和使用最为广泛的TeX格式.它构筑在Plain TeX的基础之上,并加进了很多的功能以使得使用者可以更为方便的 ...
- 部署OGG时字符集转换问题--oracle to oracle已验证，其他异构环境应当也适用
之前在安装OGG总是遇到字符集问题,尤其是多源端对一个目标端时,源端字符集不同,导致出现字符集问题 无法同步数据,查阅了大量的园子资料,都说要设置复制或抽取进程中SETENV (NLS_LANG=AM ...
- inux 虚拟机桥接模式 静态ip设置，桥接才是王道
修改/etc/sysconfig/network-scripts 目录下的 ifcfg-eth0 [root@yangcb network-scripts]# cat ifcfg-eth0 DEVI ...