vue29-vue2.0组件通信_recv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue1.0.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:'我是父组件数据'
},
components:{
'child-com':{//定义父组件
props:['msg'],//父组件从父组件获取的数据
template:'#child',//父组件页面
methods:{//父组件方法
change(){
this.msg='被更改了'//:msg.sync="a"，<strong>{{msg}}</strong> ，父级: ->{{a}} 在1.0都被更改了。
}
}
}
}
});
};
</script>
</head>
<body>
<template id="child">
<div>
<span>我是子组件</span>
<input type="button" value="按钮" @click="change">
<strong>{{msg}}</strong>
</div>
</template> <div id="box">
父级: ->{{a}}
<br>
<child-com :msg.sync="a"></child-com>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:'我是父组件数据'
},
components:{
'child-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg='被更改了'////:msg.sync="a"，<strong>{{msg}}</strong> 在2.0都被更改了。，父级: ->{{a}} 在2.0没有被更改。
}
}
}
}
});
};
</script>
</head>
<body>
<template id="child">
<div>
<span>我是子组件</span>
<input type="button" value="按钮" @click="change">
<strong>{{msg}}</strong>
</div>
</template> <div id="box">
父级: ->{{a}}
<br>
<child-com :msg="a"></child-com>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
giveData:{//父组件传对象给子组件
a:'我是父组件数据'
}
},
components:{
'child-com':{
props:['msg'],
template:'#child',
methods:{
change(){
//this.msg='被更改了'
this.msg.a='被改了';// 父级: ->{{giveData.a}}， <strong>{{msg.a}}</strong>都改了。
}
}
}
}
});
};
</script>
</head>
<body>
<template id="child">
<div>
<span>我是子组件</span>
<input type="button" value="按钮" @click="change">
<strong>{{msg.a}}</strong>
</div>
</template> <div id="box">
父级: ->{{giveData.a}}
<br>
<child-com :msg="giveData"></child-com>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
a:'我是父组件数据'
},
components:{
'child-com':{
data(){
return {//子组件数据
b:''
}
},
props:['msg'],
template:'#child',
mounted(){//mounted是原来的ready
this.b=this.msg;
},
methods:{
change(){
this.b='被改了';//<strong>{{b.a}}</strong>改了，父级: ->{{a}}没改。
}
}
}
}
});
};
</script>
</head>
<body>
<template id="child">
<div>
<span>我是子组件</span>
<input type="button" value="按钮" @click="change">
<strong>{{b.a}}</strong>
</div>
</template> <div id="box">
父级: ->{{a}}
<br>
<child-com :msg.sync="a"></child-com>
</div>
</body>
</html>
组件通信:
vm.$emit()
vm.$on(); 父组件和子组件: 子组件想要拿到父组件数据:
通过 props 之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作 问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
vue29-vue2.0组件通信_recv的更多相关文章
- vue2.0组件通信各种情况总结与实例分析
Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- vue2.0组件通信小总结
1.父组件->子组件 父组件 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- v2.0 组件通信的总结
在vue.js现在比较流行,层出不穷的js框架越来越强调数据绑定,组件化开发. 正在给公司做一个管理后台,基本思路是编写几个通用组件,采用单页面应用的形式完成: 结构大致如下: mainVue lef ...
随机推荐
- 如何使用 Open Live Writer 插入原图
博客园的指南里写了使用 Open Live Writer 插入原图.去掉阴影并设置为默认设置的步骤,但是我还是找了好久,最后通过别的文章加上摸索才知道了如何设置为原图.这里给出详细地图片: 首先,插入 ...
- 树上倍增求LCA
大概思想就是,节点$i$的第$2^{j}$个父节点是他第$2^{j-1}$个父亲的第$2^{j-1}$个父亲 然后可以$O(nlogn)$时间内解决…… 没了? //fa[i][j]表示i的第2^j个 ...
- 移动端mete设置
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- HDU 2196 Computer(经典树形DP)
题意自己看(猜) 题解 这题很经典,就是记录dp[i][0/1/2]分别代表,从i点向下最大和次大深度,和向上最大深度. 然后转移就行了. 我的写法可能太丑了.死活调不出来,写了一个漂亮的 #incl ...
- Android蓝牙技术Bluetooth使用流程（具体解释）
一:蓝牙设备之间的通信主要包含了四个步骤 设置蓝牙设备 寻找局域网内可能或者匹配的设备 连接设备 设备之间的传输数据 二:详细编程实现 1. 启动蓝牙功能 首先通过调用静态方法getDefaultAd ...
- RvmTranslator for Linux
RvmTranslator for Linuxeryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plan ...
- jni传递对象中包含arraylist对象。
相信在使用jni的过程中,总是要传递各种各样的类型,在这其中,我也碰到了一些问题. 简单的传一些内容,相信在网上一搜一大把. 所以我们就来说说.传递对象中包含arraylist吧. 在这里先给大家一个 ...
- 智课雅思词汇---十、pend是什么意思
智课雅思词汇---十.pend是什么意思 一.总结 一句话总结:[词根含义]:悬挂,垂;称量;支付 词根:-pend-, -pens- [词根含义]:悬挂,垂;称量;支付 [词根来源]:来源于拉丁语动 ...
- 13.MongoDB 连接命令格式
转自:https://www.linuxidc.com/Linux/2016-03/129456.htm 使用用户 admin 使用密码 123456 连接到本地的 MongoDB 服务上.输出结果如 ...
- django笔记10 cookie整理
感谢武沛齐老师 Alex老师 cookie 没有cookie所有的网站都登录不上 客户端浏览器上的一个文件 {'user':'ljc'} {"user":'zpt'} reques ...