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 ...
随机推荐
- Redis高可用架构
前言 Redis是一个高性能的key-value数据库,现时越来越多企业与应用使用Redis作为缓存服务器.楼主是一枚JAVA后端程序员,也算是半个运维工程师了.在Linux服务器上搭建Redis,怎 ...
- hihocoder #1609 : 数组分拆II（思维）
题目链接:http://hihocoder.com/problemset/problem/1609 题解:就先拿一个数组最多分成两部分来说吧 8 1 2 3 4 5 1 2 3 显然 输出时2 3 可 ...
- 树形动态规划 fjutoj-2131 第四集，聚集城市
第四集,聚集城市 TimeLimit:1000MS MemoryLimit:128MB 64-bit integer IO format:%lld Problem Description 在小A ...
- 关于jstl和web.xml之间的版本问题
jstl的版本1.2对应web.xml3.1版本 jstl的版本1.1对应web.xml2.3版本 (IDEA中默认创建的是2.3的web.xml,最好换成3.1版本的) web.xml模板: < ...
- GridView和ImageSwitcher以及ImageView
网格布局GridView和Listview很相似,只不过前者是多列的.如果把GridView的android:numColumns设置为1,他就是ListView了. 通过GridView和Image ...
- Net基础篇_学习笔记_第十二天_面向对象继承(字符串_字符串的各种方法）
我们可以讲字符串看做是char类型的一个只读数组.ToCharArray();将字符串转换为char数组new string(char[] chs):能够将char数组转换为字符串 1).Length ...
- java静态代码块/静态属性、构造块、构造方法执行、main方法、普通代码块的顺序
java静态代码块/静态属性.构造块.构造方法执行.main方法.普通代码块的顺序 这也是在笔试中的一个重要的考点,就有一个输出语句让你写出输出的结果. 理论知识: 静态代码块是:属于类的,在类加载时 ...
- request对象的方法
request对象封装的是请求的数据,由服务器创建,作为实参传递给Servlet的方法,一个请求对应一个request对象,request对象可以获得请求数据. 1.获取请求行信息 (1)get提交 ...
- Java第二次作业第五题
自定义异常类,非法年龄类,并在person3类中使用此类,根据情况抛出异常,并进行处理. package naizi; class IllegalAgeException extends Except ...
- ZFNet(2013)及可视化的开端
目录 写在前面 网络架构与动机 特征可视化 其他 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 ZFNet出自论文< Visualizing and Unde ...