Vue组件间的通信方式
1. props传递数据
在父组件中使用儿子组件
<template>
<div>
父组件:{
{mny}}
<Son1 :mny="mny"></Son1>
</div>
</template>
<script>
import Son1 from "./Son1";
export default {
components: {
Son1
},
data() {
return {
mny: 100 };
}
};
</script>
在子组件中获取父组件的mny值
<template>
<div>
子组件:{
{subMny}}
</div>
<template>
<script>
export default {
props: {
mny: String
},
data() {
return {
subMny: this.mny
}
}
}
</script>
2.$emit使用
子组件出发父组件的方法
/* 父组件 */
<template>
<div>
父组件:{
{mny}}
<Son1 :mny="mny" @input="change"></Son1>
</div>
</template>
<script>
import Son1 from "./Son1";
export default {
methods: {
change(mny) {
this.mny = mny;
}
},
components: {
Son1
},
data() {
return {
mny: 100 };
}
};
</script