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 ...
随机推荐
- go-web程序的热更新
前言: 一直编译累死人啊,该偷懒就得偷懒 当使用go开发web程序时,修改点代码就得编译,虽然编译速度很快,但是也累啊,想起java的spring-boot有热更新插件, php根本都不需要重启,go ...
- mysql类似oracle rownum写法
rownum是oracle才有的写法,rownum在oracle中可以用于取第一条数据,或者批量写数据时限定批量写的数量等 mysql取第一条数据写法 SELECT * FROM t order by ...
- 百度之星资格赛 调查问卷 bitset模板（直接将字符串转化成二进制数组并可以计算出十进制值）
Problem Description 度度熊为了完成毕业论文,需要收集一些数据来支撑他的论据,于是设计了一份包含 mm 个问题的调查问卷,每个问题只有 'A' 和 'B' 两种选项. 将问卷散发出去 ...
- JS执行机制详解，定时器时间间隔的真正含义
壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...
- Altera Quartus II 15.0安装
写在前面的话 开始学习之前,我们首先应该选择并安装好自己的开发工具,那么我们用什么软件来编译代码呢?梦翼师兄推荐给大家的是Altera 目前最新的Quartus II 15.0 版本,当然啦,这 ...
- super(classname,self).__init__() 作用
- mysql 查询参数尾部有空格时被忽略
最近再使用mysql时,无意见发现,当我查询参数尾部输入若干个空格时,依然可以查出和不加空格相同的结果,像这样 select * from wa where name='be ' 等同于 select ...
- Tomcat原理系列之六：详解socket如何封装成request(上)
目录 参与者 总结 @(详解socket如何封装成request) 看源码虽然不能马上提升你的编码水平.但能让你更好的理解编程. 因为我们tomcat多是以NIO形式处理请求,所以本系列讲的都是NIO ...
- Sublime运行C++程序教程
前言 传说sublime是全球最好的编辑器,可是只是编辑器啊!!!如果要运行,对于我们这些蒟蒻来说,不得不去使用DEV_C++.我们总是幻想能让sublime变成一个轻量级IDE,那该多好啊!!! 那 ...
- GlusterFs卷类型分析及创建、使用（结合kubernetes集群分析）
引言 本文通过对卷类型的分析对比,来帮助读者选取生产环境最符合服务的挂载存储,命令可结合<glusterfs详解及kubernetes 搭建heketi-glusterfs>进行实验,下面 ...