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 ...
随机推荐
- 逆向破解之160个CrackMe —— 026
CrackMe —— 026 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合一共160个待逆向破解的程序 CrackMe:它们都是一些公开给别人尝试破解的小程序,制作 c ...
- openSession 与 getCurrentSession的区别
1.openSession 每一次获得的是一个全新的session对象,而getCurrentSession获得的是与当前线程绑定的session对象 package cn.kiwifly.view; ...
- 深入理解 Handler 消息机制
记得很多年前的一次面试中,面试官问了这么一个问题,你在项目中一般如何实现线程切换? 他的本意应该是考察 RxJava 的使用,只是我的答案是 Handler,他也就没有再追问下去了.在早期 Andro ...
- 2019nc#5
题号 标题 已通过代码 题解/讨论 通过率 团队的状态 A digits 2 点击查看 1017/2384 通过 B generator 1 点击查看 567/3692 通过 C generato ...
- P2762 太空飞行计划问题 最大权闭合子图
link:https://www.luogu.org/problemnew/show/P2762 题意 承担实验赚钱,但是要花去对应仪器的费用,仪器可能共用.求最大的收益和对应的选择方案. 思路 这道 ...
- hdu 5037 Frog（贪心）
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5037 题解:为了让放的石头有意义肯定是没l+1的距离放2个也就是说假设现在位置为pos那么 ...
- CodeForces 1082 F Speed Dial
题目传送门 题意:现在有n个电话号码,每个电话号码为si,拨打次数为pi. 现在有k 个快捷键,每次拨打号码之前可以先按一次快捷键,然后再输入数字,现在问输入数字次数是多少.快捷键的号码可以不在电话簿 ...
- codeforces 799 D. Field expansion（dfs+思维剪枝）
题目链接:http://codeforces.com/contest/799/problem/D 题意:给出h*w的矩阵,要求经过操作使得h*w的矩阵能够放下a*b的矩阵,操作为:将长或者宽*z[i] ...
- Atcoder D - Black and White Tree（树dp+博弈）
题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_d 题意:有一棵树先手涂白色,后手涂黑色,直到不能再涂为止.涂完后再把所有黑色直接相邻的白色都变成 ...
- pytho的traceback的解读
写 Python 代码的时候,当代码中出现错误,会在输出的时候打印 Traceback 错误信息,很多初学者看到那一堆错误信息,往往都会处于懵逼状态,脑中总会冒出一句,这都是些啥玩意.如果你是第一次 ...