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 ...
随机推荐
- 特殊字符处理 java-jsp
public String dealStr(String name){ String newStr=""; if(name != null && name.leng ...
- DB2 根据id查表
SELECT * FROM SYSCAT.TABLES WHERE TBSPACEID = 2 AND TABLEID = 50 SELECT * FROM SYSCAT.COLUMNS WHERE ...
- P2157 [SDOI2009]学校食堂 状压DP
题意: 排队买饭,时间为前一个人和后一个人的异或和,每个人允许其后面B[i] 个人先买到饭,问最少的总用时. 思路: 用dp[i][j][k] 表示1-i-1已经买好饭了,第i个人后面买饭情况为j,最 ...
- bzoj 1051 [HAOI2006]受欢迎的牛（tarjan缩点）
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1051 题解:缩点之后判断出度为0的有几个,只有一个那么输出那个强连通块的点数,否者 ...
- 最小生成树问题---Prim算法学习
一个具有n个节点的连通图的生成树是原图的最小连通子集,它包含了n个节点和n-1条边.若砍去任一条边,则生成树变为非连通图:若增加一条边,则在图中形成一条回路.本文所写的是一个带权的无向连通图中寻求各边 ...
- 【Offer】[59-1] 【滑动窗口的最大值】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 给定一个数组和滑动窗口的大小,请找出所有滑动窗口里的最大值.例如,如果输入数组{2,3,4,2,6,2, 5,1}及滑动窗口的大小3,那 ...
- ELKBR部署检测项目日志
ELK filebeat:具有日志收集功能,相比logstash,+filebeat更轻量,占用资源更少,适合客户端使用. redis消息队列选型:Redis 服务器通常都是用作 NoSQL 数据库, ...
- .Net基础篇_学习笔记_第七天_Continue关键字的用法
Continue: 立即结束本次循环,判断循环条件: 如果成立,则进行下一次循环,否则退出循环. Continue和break的区别: 遇到break,循环不继续. 遇到continue,本次循环也不 ...
- 6 个 K8s 日志系统建设中的典型问题，你遇到过几个？
作者 | 元乙 阿里云日志服务数据采集客户端负责人,目前采集客户端 logtail 在集团百万规模部署,每天采集上万应用数 PB 数据,经历多次双 11.双 12 考验. 导读:随着 K8s 不断 ...
- git之rebase、merge和cherry pick的区别（面试常问）
git flow图例镇楼 merge 这个简单,初学者常用.比如主分支是Dev,最新版本是01.然后小明基于此,搞了个feature 分支A,业务:打酱油.然后在上面多次提交,完成功能迭代开发,如A1 ...