系统总结vue组件间通信、数据传递(父子组件,同级组件)
总结一下对vue组件通信的理解和使用。
一、组件目录结构
- 父组件:app.vue
- 子组件:page1.vue
- 子组件:page2.vue
父组件 app.vue
<template><div id="app"><p>请输入单价: <input type="text" v-model="price"></p><page1 :price="price" @downPrice="downPrice"></page1><page2></page2></div>
</template><script>
import Page1 from "./components/page1";
import Page2 from "./components/page2";
export default {name: "App",data() {return {price: ""};},components: {Page1,Page2},methods: {downPrice() {this.price = (this.price - 1).toString();}}
};
</script>
子组件 page1.vue
<template><div><p><span>单价:</span><span>{{price}}</span> <button @click="downPrice">降价1元</button></p><p>数量: {{count}} </p></div>
</template>
<script>
import bus from '../eventBus.js'
export default {props:{price:{type:String,default:''}},data(){return{count:10}},methods:{downPrice(){this.$emit('downPrice')}},watch:{price(newPrice){bus.$emit('priceChange',newPrice,this.count) } }
}
</script>
子组件 page2.vue
<template><div><p><span>总金额:{{totalMoney}}元 </span>剩余金额:<span>{{balance}}元</span></p></div>
</template>
<script>
import bus from "../eventBus.js";
export default {data() {return {balance: 1000,totalMoney: 1000};},mounted() {bus.$on("priceChange", (price, count) => {this.balance = this.totalMoney - price * count;});}
};
</script>
二、通信过程介绍
1.父组件向子组件传值
1.1在父组件中引入需要通信的子组件
import Page1 from "./components/page1";
1.2 在父组件的components
中注册该子组件
components: {Page1}
1.3 在父组件的template
中使用子组件
<page1></page1>
1.4 将需要传递给子组件的值通过v-bind(如果传递的是固定值,则不需要v-bind,直接属性名,属性值传递即可)
。
<page1 :price="price"></page1>// 此处的price则是传递给子组件的值
1.5 在对应的子组件中,通过props
属性接收传递过来的值
props:{price:{type:String,default:''}}
1.6 在子组件中使用该值
<p><span>单价:</span><span>{{price}}</span></p>
2.子组件向父组件中传值
2.1 在page1.vue中,通过触发子组件的方法(这里是自定义的downPrice
方法),
<p><span>单价:</span><span>{{price}}</span> <button @click="downPrice">降价1元</button></p>
2.2 在子组件的methods
的downPrice
中,通过this.$emit()
,将事件和参数传递给父组件
downPrice(count){this.$emit('downPrice',count)}// downPrice 是传递给父组件的事件,父组件触发并相应这个方法
// count 传递给父组件的参数,在父组件中,可以对和这个参数进行相应操作
2.3 在父组件中接受子组件传递的事件downPrice
和数据
<page1 :price="price" @downPrice="downPrice"></page1>
2.4 父组件对接收到的事件和数据做出响应
downPrice(count) {this.price = (this.price - 1).toString();// this.price = (this.price - count).toString();}
3、父组件调用子组件方法
方法一:
3.1 在使用子组件时,给子组件加一个ref
引用
<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>
3.2 父组件通过this.$refs
即可找到该子组件,也可以操作子组件的方法
this.$refs.page1.子组件方法
打印出获取到的子组件信息:
方法二:
3.3 通过$children
,可以获取到所有子组件的集合
this.$children[0].某个方法
4、子组件调用父组件方法
4.1 通过 $parent
可以找到父组件,进而调用其方法
this.$parent.父组件方法
打印出的父组件信息
5、平级组件通信
同级组件不能直接传值,需要一个中间桥梁,可以先将数据传递给公共的父组件,然后父组件再将数据传递给需要的子组件。
5.1 定义一个公共文件 eventBus.js
代码很简单(就2句),只是创建一个空的vue实例
import Vue from 'vue'
export default new Vue()
5.2 在需要通信的同级组件中分别引入eventBus.js
文件
import bus from '../eventBus.js'
5.3 在page1.vue中,通过$emit
将事件和参数传递给page2.vue
price(newPrice){bus.$emit('priceChange',newPrice,this.count)
}
5.4 在page2.vue 中,通过$on
接收接收参数和相应事件
bus.$on("priceChange", (price, count) => {this.balance = this.totalMoney - price * count;});
参考文章:https://segmentfault.com/a/1190000011882494
一般大型的项目,推荐使用Vuex来管理组件之间的通信
系统总结vue组件间通信、数据传递(父子组件,同级组件)相关推荐
- C#不同窗体间通信,数据传递
在一个项目中,很多时候都需要在窗体间进行数据传递和通信,最觉见的是父子窗体之间的数据传递,比如登录ID,各个窗体都需要知道.有很多文章都写了这方面的问题,提出很多优秀的方法,鄙人不才,搜了一些资料之后 ...
- VUE组件间的数据传递
众所周知,Vue 是基于组件来构建 web 应用的.组件将模块和组合发挥到了极致.Vue 是虽说吸取了 AngularJs 的 MVVM的思想,但是它是单向数据流的,也就是说子组件无法直接改变父组件状 ...
- Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件 与 父组件传递数据给子组件 -- 方式props ...
- vue组件穿方法_vue组件中的数据传递方法
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props ...
- 深入浅出,带你看懂Vue组件间通信的8种方案
前言 Vue种组件通信的情况有多种,总结有以下4种情况: 父子组件间通信 兄弟组件间通信 祖孙后代间通信 无关系组件间通信 8种解决方案 通过 props 传递 通过 $emit 触发自定义事件 使用 ...
- Vue组件间通信之$emit/$on
一.介绍 一个vue.js肯定是由多个组件组成的,而组件实例的作用域是相互独立的,即不同组件之间的数据无法简单的相互引用. 但是避免不了有时需要相互引用,比如一个父组件包含多个子组件,当父组件更改后需 ...
- Vue实现组件间通信的七种方式
1. props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信: 父传子:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属 ...
- Vue学习(十六):组件间通信
1. props 1.1 使用 功能:让组件接收外部传过来的数据 传递数据:<Demo name="xxx"/> 接收数据: 第一种方式(只接收):props:['na ...
- vue中组件间通信的6种方式
前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...
- 【Vue组件间通信】 全局事件总线、订阅与发布
目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事 ...
最新文章
- CF1012F Passports
- [APIO2018] Duathlon 铁人两项 圆方树,DP
- <马哲>世界2017-12-27
- 设置双核浏览器的浏览模式meta name=“renderer” content=“webkit|ie-comp|ie-stand”
- 配置apache虚拟主机
- oracle账户解锁28000,oracle 下载 账号密码ORA-28000账户被锁和解锁
- python坦克大战_Life is short,you need Python——Python实现坦克大战(一)
- Spark和机器学习整合
- [转载] pandas中Series数组创建方法
- 《数学之美》—PageRank
- 宗成庆《自然语言理解》第二章作业
- pyqt 鼠标离开按钮_小米 Smart Pad 体验:表面它是个鼠标垫,其实还是个鼠标垫...
- 【MATLAB】数值运算 ( 数值运算示例 | 三角函数 | 指数运算 | 对数运算 | 常用的数学公式对应函数 )
- Tencent/tencent-ml-images Readme说明
- iPhone蓝牙回控,iPhone手机互联,认证
- 软工专硕考研_软件工程考研:专硕、学硕实力强校排名,2020考研党择校参考...
- 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )
- 图像处理之特征提取(一)之HOG特征简单梳理
- 计算机硬盘密码解不开,Win10打不开磁盘显示需要输入48位恢复密钥以解锁此驱动器怎么办...
- 基于java springboot美容美发美甲预约小程序源码