vue平行组件传值
平行组件传值
通过平行组件传值可以实现任何情境下的传值,包括(父传子,子传父)
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> <my-alex></my-alex>
<hr>
<my-mjj></my-mjj> </div>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
// 借助一个空的VUE对象 实现组件之间通信
let bus = new Vue(); //子组件A
let A = {
template: `
<div>
<h2>这是子组件: my-alex</h2>
<p> my-mjj被选中的次数:{{ num }} </p>
</div>
`,
data() {
return {
num: 0
}
},
// 关键点 第二步 监听B组件触发了xuanwo A就加1
mounted() {
//在文档准备就绪之后就要开始监听bus是否触发了xuanwo的事件
/*
bus.$on("xuanwo",function(val){
// this.num += 1;
console.log(val);// 点击B 可以跟着加1了
//关键点 第三步 怎么改A里面的num 的值
console.log(this); //bus对象 不是A
})
*/ bus.$on("xuanwo",(val)=>{ //把上面的匿名函数改成箭头函数
// this.num += 1;
console.log(val); //点击B 可以跟着加1了
//关键点 第三步 怎么改A里面的num 的值
console.log(this); //A组件
this.num = val;
})
}
}; //子组件B
let B = {
template: `
<div>
<h2>这是子组件: my-mjj</h2>
<button v-on:click="add">选我</button> </div>
`,
data(){
return{ num:0 }
},
methods:{
add(){
this.num += 1;
// **** 关键点第一步 利用bus 对象抛出一个自定义事件
bus.$emit("xuanwo",this.num)
}
}
}; //实例化根组件
let app = new Vue({
el: "#app",
data: {
totalNum: 0
},
components: {
"my-alex": A,
"my-mjj": B,
}
})
</script>
</body>
</html>
vue平行组件传值的更多相关文章
- vue平行组件传值 params
欢迎加入前端交流群交流知识&&获取视频资料:749539640 需要传值的组件组件: <template> <div> <router-link :to= ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
- 一个故事讲懂vue父子组件传值
作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...
- vue 父子组件传值以及方法调用，平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- vue.js组件传值
组件传值有一下几种方式:父子传值(父传子,子传父),非父子传值,vuex,插槽作用域 1.父子传值: (1)父传子: 传值方:当子元素在父元素中当标签使用时,通过给子标签绑定一个自定义属性,属性值为需 ...
- vue兄弟组件传值
vue中除了父子组件传值,父传子用props,子传父用$emit,有时候兄弟组件之间也需要传值 1. 先定义一个中间件,src下面新建self.js import Vue from 'vue'; le ...
随机推荐
- ZYNQ Block Design中总线位宽的截取与合并操作
前言 在某些需求下,数据的位宽后级模块可能不需要原始位宽宽度,需要截位,而某些需求下,需要进行多个数据的合并操作. 在verilog下,截位操作可如下所示: wire [7:0] w_in; wire ...
- CF #541 E. String Multiplication
题意: 给定一系列字符串,每次都是后一个字符串和前面的融合,这个融合操作就是原来的串分成独立的,然后把新串插入到这些空格中.问最后,最长的相同连续的长度. 思路: 这道题可以贪心的来,我们压缩状态,记 ...
- 洛谷P1582 倒水 二进制 lowbit __builtin_popcount
P1582 倒水:https://www.luogu.org/problemnew/show/P1582 题意: 给定n瓶装有1升的水瓶,每次可以把两瓶装水量相同的水和成一瓶,问最少还要增加几瓶装有1 ...
- 杭电2018暑假多校第一场 D Distinct Values hdu6301 贪心
Distinct Values Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- C#开发BIMFACE系列22 服务端API之获取模型数据7：获取多个模型的楼层信息
系列目录 [已更新最新开发文章,点击查看详细] 在<C#开发BIMFACE系列21 服务端API之获取模型数据6:获取单模型的楼层信息>中介绍获取单个模型的所有楼层信息.某些场景下 ...
- Linux入门基础之一
Linux 入门基础 一.Linux 系统安装 安装方法网上很多,请自行百度 二.Linux 基本操作 2.1.GNOME图形界面基本操作 操作类似于Windows系统操作 打开每一个文件夹都会打开一 ...
- CVE-2018-14418 擦出新火花
笔者<Qftm>原文发布:https://xz.aliyun.com/t/6223 0x00 前言 最近,一次授权的渗透测试项目意外的撞出了(CVE-2018-14418)新的火花,在这里 ...
- redis之pipeline使用
redis之pipeline 我们要完成一个业务,可能会对redis做连续的多个操作,这有很多个步骤是需要依次连续执行的.这样的场景,网络传输的耗时将是限制redis处理量的主要瓶颈. 那么此时就可以 ...
- mybatis拦截器实现通用权限字段添加
实现效果 日常sql中直接使用权限字段实现权限内数据筛选,无需入参,直接使用,使用形式为:select * from crh_snp.channelinfo where short_code in ( ...
- ImageView的功能和使用
ImageView继承自View类,它的功能用于显示图片, 或者显示Drawable对象 xml属性: src和background区别 参考:http://hi.baidu.com/sunboy_2 ...