脚本宝典收集整理的这篇文章主要介绍了vue组件间通信、数据传递(父子组件,同级组件),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
总结一下对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>
<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>
<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>
import Page1 from "./components/page1";
components
中注册该子组件components: {
Page1
}
template
中使用子组件<page1></page1>
v-bind(如果传递的是固定值,则不需要v-bind,直接属性名,属性值传递即可)
。<page1 :price="price"></page1>
// 此处的price则是传递给子组件的值
props
属性接收传递过来的值props:{
price:{
type:String,
default:''
}
}
<p><span>单价:</span><span>{{price}}</span></p>
downPrice
方法), <p><span>单价:</span><span>{{price}}</span> <button @click="downPrice">降价1元</button></p>
methods
的downPrice
中,通过this.$emit()
,将事件和参数传递给父组件downPrice(count){
this.$emit('downPrice',count)
}
// downPrice 是传递给父组件的事件,父组件触发并相应这个方法
// count 传递给父组件的参数,在父组件中,可以对和这个参数进行相应操作
downPrice
和数据<page1 :price="price" @downPrice="downPrice"></page1>
downPrice(count) {
this.price = (this.price - 1).toString();
// this.price = (this.price - count).toString();
}
方法一:
ref
引用<page1 :price="price" @downPrice="downPrice" ref="page1"></page1>
this.$refs
即可找到该子组件,也可以操作子组件的方法this.$refs.page1.子组件方法
打印出获取到的子组件信息:
方法二:
$children
,可以获取到所有子组件的集合this.$children[0].某个方法
$parent
可以找到父组件,进而调用其方法this.$parent.父组件方法
打印出的父组件信息
同级组件不能直接传值,需要一个中间桥梁,可以先将数据传递给公共的父组件,然后父组件再将数据传递给需要的子组件。
eventBus.js
代码很简单(就2句),只是创建一个空的vue实例
import Vue from 'vue'
export default new Vue()
eventBus.js
文件import bus from '../eventBus.js'
$emit
将事件和参数传递给page2.vueprice(newPrice){
bus.$emit('priceChange',newPrice,this.count)
}
$on
接收接收参数和相应事件bus.$on("priceChange", (price, count) => {
this.balance = this.totalMoney - price * count;
});
一般大型的项目,推荐使用Vuex来管理组件之间的通信
如果对道友你有帮助,请收藏和点赞,如果觉得有问题,欢迎留言指出,demo查看
以上是脚本宝典为你收集整理的vue组件间通信、数据传递(父子组件,同级组件)全部内容,希望文章能够帮你解决vue组件间通信、数据传递(父子组件,同级组件)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。