vue组价通信问题
网址:https://segmentfault.com/a/1190000011882494
一、组件目录结构
父组件:app.vue
子组件:page1.vue
子组件:page2.vue
父组件 app.vue
请输入单价:
子组件 page1.vue
单价:{{price}} <button @click=“downPrice”>降价1元
数量: {{count}}
</div>
二、通信过程介绍
1.父组件向子组件传值
1.1在父组件中引入需要通信的子组件
import Page1 from "./components/page1";
1.2 在父组件的components中注册该子组件
components: {
Page1
}
1.3 在父组件的template中使用子组件
1.4 将需要传递给子组件的值通过v-bind(如果传递的是固定值,则不需要v-bind,直接属性名,属性值传递即可)。
// 此处的price则是传递给子组件的值
1.5 在对应的子组件中,通过props属性接收传递过来的值
props:{
price:{
type:String,
default:’’
}
}
1.6 在子组件中使用该值
单价:{{price}}
2.子组件向父组件中传值 2.1 在page1.vue中,通过触发子组件的方法(这里是自定义的downPrice方法),单价:{{price}}
// downPrice 是传递给父组件的事件,父组件触发并相应这个方法
// count 传递给父组件的参数,在父组件中,可以对和这个参数进行相应操作
2.3 在父组件中接受子组件传递的事件downPrice和数据
<page1 :price=“price” @downPrice=“downPrice”>
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”>
3.2 父组件通过this.refs.page1.子组件方法
打印出获取到的子组件信息:
clipboard.png
方法二:
3.3 通过children[0].某个方法
4、子组件调用父组件方法
4.1 通过 parent.父组件方法
打印出的父组件信息
clipboard.png
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中,通过KaTeX parse error: Expected '}', got 'EOF' at end of input: …
bus.emit(‘priceChange’,newPrice,this.count)
}
5.4 在page2.vue 中,通过on(“priceChange”, (price, count) => {
this.balance = this.totalMoney - price * count;
});
一般大型的项目,推荐使用Vuex来管理组件之间的通信
上一篇: Access数据库规格C++