vue2.0 组件通信
组件通信:
子组件要想拿到父组件数据 props
子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,
对象之间引用。
例子:
<script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
giveData:{
a:'我是父组件数据'
}
},
components:{
'child-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg.a='被改了';
}
}
}
}
});
};
</script>
<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>
例子:自定义事件
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
` ,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.οnlοad=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
转载于:https://www.cnblogs.com/nmxs/p/6831418.html
vue2.0 组件通信相关推荐
- 关于vue2.0组件通信
1.父组件通过props属性给子组件通信 //父组件 <template> <child :show="is_showshare" :age="age& ...
- vue2.0组件之间的通信
官方建议可以直接使用一个空vue实例来处理简单的事件触发机制 var bus = new Vue(); bus.$emit('create',{title:'name'}); bus.$on('cre ...
- Vue2.0组件实现动态搜索引擎(二)
接上一篇,完成logo部分我们就要开始整个项目的核心--panel组件. 整个panel组件分为3个部分:关键字输入框,相关搜索建议下拉列表和搜索跳转按钮. 由于我们整个项目是设计成父子组件的架构所以 ...
- vue2.0组件生命周期探讨
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue ...
- Vue2.0组件注册
组件注册分为全局注册 和 局部注册 import 名称 from '包地址'//app.component用来对组件进行全局注册 app.component('my-swiper' ,'导包时使用的名 ...
- Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)
效果 <template><div ref="txttype" class="bottom"><div :class=" ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- Vue3 - 组件通信(父传子)
前言 在 Vue3 中,父组件向子组件传参的方法. 与 Vue2 相比,还是有一些区别的. 基础示例 现在我们的需求是,要通过父组件,传递一个标题来让子组件显示. 子组件 Com.vue: <t ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
最新文章
- C#命名规则、开发习惯和风格
- matlab中fdyn,Matlab的用法总结
- html range关联文本框,HTML5gt;meter标签与input(type=range)标签结合制作简易范围指示器...
- 李宏毅深度学习——优化方法
- 实现值两者之间添加 , 、 | 等字符
- 里面怎么打中文字_“标题党”英语应该怎么翻译?不要翻译成“title party”!...
- FreeRTOS源码分析与应用开发11(完):编译、链接与部署
- 进程互斥的软件实现方法
- Tricks(二十)—— 从 N 个数中等概率地产生 M 个数
- 事件 event
- 契税申报期限_纳税申报的5个小常识,不知道的不是合格的财务人!
- 世界地图可以无限放大_做外贸有哪些软件可以推荐?
- Ghost module
- 文档服务器 件排名,服务器十大品牌排名
- docker网络问题
- codeforces 1077E Thematic Contests
- 【渝粤教育】电大中专计算机网络基础作业 题库
- 操作系统 - startx/xinit
- 398高校毕业设计选题
- MSSQL Server 2008 - express 版 安装 企业管理器Management Studio