vue2.0-组件传值
父组件给子组件传值，子组件用props接收
例子：两个组件，一个是父组件标签名是parent，一个是子组件标签名是child，并且child组件嵌套在父组件parent里，大概的需求是：我们子组件里需要显示父组件里的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件接收父组件的的数据</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<child :receive-name="msg1"></child>
</div>`,
data(){
return {
msg:'我是父组件的第一条数据',
msg1:'我是父组件的第二条数据'
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<p>子组件接收父组件的的数据：{{receiveName}}</p>
</div>`,
data(){
return {
msg1:'我是子组件的数据'
}
},
props:['receiveName']
}
}
}
}
});
</script>
</body>
</html>
子组件child用props接收父组件parent里的数据，props：[]里的参数是用来接收父组件数据的名字，为了方便用了receiveName，然后我们需要在父组件里的子组件标签child上动态绑定receiveName，由于vue推荐有大小写的英文用-，（receiveName->receive-name）,v-bind：属性名可以成简写：属性名,:receive-name="父组件的数据",父组件的数据有msg,msg1。子组件需要哪个就用那个,这样看起来是不是很方便。
子组件通过事件向父组件发送自己的数据，监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
this.$emit(event,...args);
/*
* event: 要触发的事件
* args: 将要传给父组件的参数
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件向父组件传值</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<p>父组件接收到子组件的数据是：{{parentMsg1}}</p>
<child v-on:listenChildEvent="showChildMsg"></child>
</div>`,
data(){
return {
parentMsg:'我是父组件的第一条数据',
parentMsg1:'' }
},
methods:{
showChildMsg(data){
// console.log(data);
this.parentMsg1=data;
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<button v-on:click="sendMsgToParent">发送子组件数据给父组件</button>
</div>`,
data(){
return {
childMsg:'我是子组件的数据'
}
},
methods:{
sendMsgToParent(){
let childData=this.childMsg;
this.$emit('listenChildEvent',childData)
}
}
}
}
}
}
});
</script>
</body>
</html>
最后我们来简单总结下本例子：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件（listenToChildEvent），并传递一个参数（childData），childData就是子组件的数据。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 ：showChildMsg ,该方法带一个参数即是子组件的额外参数,在子组件里数据已经赋值给这个额外参数,所以最后获取到的参数就是子组件的值
4.保存修改的文件，在浏览器中点击按钮，父组件获取到子组件的数据
细结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>非父子组件通信</title>
<script src="https://cdn.bootcss.com/vue/2.5.5/vue.js"></script>
</head>
<body>
<div id="example">
<counter></counter>
<counte></counte>
</div>
</body>
<script>
var vm=new Vue();
//创建兄弟组件A
var A={
template:`
<div>
<span>{{a}}</span>
<button @click="send">点击发送数据给B组件</button>
</div>
`,
data(){
return {
a:'我是A组件的数据'
}
},
methods:{
send(){
vm.$emit('msga',this.a)
}
}
};
//创建兄弟组件B
var B={
template:`
<div>
<span>我是B组件->{{a}}</span>
</div>
`,
data(){
return {
a:''
}
},
mounted(){
vm.$on('msga',function(a){
this.a=a;
}.bind(this));
}
}; //注册A B组件
new Vue({
el:'#example',
components:{
'counter':A,
'counte':B
}
});
</script>
</html>
以上就是组件之间的传值了，如果小伙伴们有任何疑问，欢迎留言！小编会及时回复。谢谢对博客园的支持！
vue官网链接：https://cn.vuejs.org/
vuex官网链接：https://vuex.vuejs.org/zh-cn/
axios网站链接：https://www.npmjs.com/package/axios
vue2.0-组件传值的更多相关文章
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue2.0 组件化及组件传值
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- vue2.0组件之间的传值
1.父子组件--props props:需要注意的是,虽然的是单向的数据流,但是如果传递的是数组或是对象这样的引用类型,子组件数据变化,父组件的数据通也会变化 子组件代码 <template&g ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转：Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
随机推荐
- KMPlayer速度步进设置及快捷键设置和同级视频自动加入播放列表
速度步进设置 快捷键设置 同级视频自动加入播放列表
- laya的UI编辑器
//加载一个图集 Laya.loader.load("res/atlas/comp.json",Handler.create(this,this.onLoaderComp), Ha ...
- Dynamic Signals and Slots
Ref https://doc.qt.io/archives/qq/qq16-dynamicqobject.html Trolltech | Documentation | Qt Quarterly ...
- spring boot 项目 热启动
第一需要 spring-boot-devtools 依赖 <dependency> <groupId>org.springframework.boot</groupId& ...
- python通过xlwt模块直接在网页上生成excel文件并下载
urls: from django.conf.urls import url, include from . import views urlpatterns = [ ... url(r'^domai ...
- 通过阅读python subprocess源码尝试实现非阻塞读取stdout以及非阻塞wait
http://blog.chinaunix.net/uid-23504396-id-4661783.html 执行subprocess的时候,执行不是问题最麻烦的是获取进程执行后的回显来确认是否正确执 ...
- Linux rm命令详解
Linux rm命令 Linux rm命令用于删除一个文件或者目录 语法: rm [options] name... 参数解释: -f, --force 强制删除.忽略不存在的文件,不提示确认 -i ...
- Centos 使用find查找
CentOS查找目录或文件 find / -name svn 查找目录:find /(查找范围) -name '查找关键字' -type d查找文件:find /(查找范围) -name 查找关键字 ...
- 并行计算——理想的PRAM模型
PRAM(Parallel Random Access Machine)模型是多指令流多数据流(MIMD)并行机中的一种具有共享存储的模型.它假设有一个无限大容量的共享存储器,并且有多个功能相同的处理 ...
- oracle--合并行数据(拼接字符串)，获取查询数据的前3条数据...
--标准函数Lpad 可以实现左补零,但是如果多于需要长度,则会截断字符串 SELECT LPAD ('1' , 3 , '0') FROM DUAL -- return 001 情况一:需要补零. ...