组件间通信方式
- 父组件给子组件传值
- 子组件给父组件传值
- 不相关组件传值
1、父组件给子组件传值
//父组件
<template>
<div id='app'>
<child title="我是父组件传递的title"/>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
}
}
}
</script>
//子组件
<template>
<div id='app'>
{
{
title}}
</div>
</template>
<script>
export default {
props:{
title:String
},
components: {
},
data () {
return {
}
}
}
</script>
2、子组件给父组件传值
父组件需要将触发的事件传递给子组件,字组件通过$emit触发
//父组件
<template>
<div id='app'>
<p :style="{fontSize:fontSize + 'px',color:'red'}">我是父组件的值</p>
<child @changeFontSize="changeFontSize"/>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
data () {
return {
fontSize:16
}
},
methods:{
changeFontSize(value){
this.fontSize += 1;
}
}
}
</script>
//子组件
<template>
<div id='app'>
<button @click="addFontSize">点击变大</button>
</div>
</template>
<script>
export default {
props:{
fontSize:Number
},
data () {
return {
}
},
methods:{
addFontSize(){
this.$emit("changeFontSize",0.1);
}
}
}
</script>
3、不相关组件传值(eventBus)
//component1
<template>
<div id='app'>
<h1>event-bus</h1>
<button @click="sub">-</button>
<input style="width:30px;text-align:center" :value="value"/>
<button @click="add">+</button>
</div>
</template>
<script>
import bus from './eventbus'
export default {
props:{
num:String
},
components: {
},
data () {
return {
value:12
}
},
created(){
this.value = parseInt(this.num)
},
methods:{
sub(){
if(this.value>1){
this.value -= 1;
bus.$emit("numchange",this.value)
}
},
add(){
this.value+=1;
bus.$emit("numchange",this.value)
}
}
}
//commponent2
<template>
<div id='app'>
{
{
msg}}
</div>
</template>
<script>
import bus from './eventbus'
export default {
components: {
},
data () {
return {
msg:'123'
}
},
created(){
bus.$on('numchange',(value)=>{
this.msg = `您选择了${
value}件商品`
})
}
}
//eventbus.js
import Vue from 'vue'
export default new Vue()
//index.vue
<template>
<div id='app'>
<com1 num="12"/>
<com2/>
</div>
</template>
<script>
import com1 from './component1'
import com2 from './component2'
export default {
components: {
com1,com2
},
data () {
return {
}
}
}