vue 组件之间的传值以及方法调用

父子组件传值

父页面 引用子页面

// 父页面代码
<template>
<div>
<component-A :logo="logoMsg"></component-A>  //logoMsg是父组件data里的值
</div>
</template>

<script>
import componentA from './component-a.vue'

export default {
data() {
return {}
},
components: {
'component-A': componentA
}
}
</script>

// 子页面代码
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
<script>
export default {
props: ['logo'],  // 获取父页面传来的值
data() {
return {}
}
}
</script>

子组件调用父组件方法并向父组件传值

// 父页面代码
<template>
<div>
<component-A :logo="logoMsg" @toParent="componenta"></component-A>  //logoMsg是父组件data里的值
</div>
</template>

<script>
import componentA from './component-a.vue'

export default {
data() {
return {}
},
components: {
'component-A': componentA
},
methods: {
componenta(data) {  // data就是子组件传递过来的值
console.log(data)
}
}
}
</script>

// 子页面代码
<template>
<div class="componentA">
<div>{{logo}}</div>
</div>
</template>
<script>
export default {
props: ['logo'],  // 获取父页面传来的值
data() {
return {}
},
methods: {
toParent() {
this.$emit('toParent', '11111') // 调用父组件toParent方法，并传递参数
}
}
}
</script>

兄弟组件传值

先子传父，再父传子

不相关组件传值

创建一个Vue的实例，让各个组件共用同一个事件机制。
传递数据方，通过一个事件触发eventVue.emit(方法名，传递的数据)。接收数据方，通过mounted()触发eventVue.emit(方法名，传递的数据)。 接收数据方，通过mounted(){}触发eventVue.emit(方法名，传递的数据)。接收数据方，通过mounted()触发eventVue.on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})

1. 创建一个单独的js文件,eventVue.js：

import Vue from 'vue'
export default new Vue()

// 组件A页面
<template>
<div class="componentA">
</div>
</template>
<script>
import eventVue './eventVue.js'

export default {
data() {
return {}
},
created(){
eventVue.$on('byBus', (data) => {  // 组件A $on接受事件传递数据
this.busData = data
})
},
methods: {

}
}
</script>

// 组件B页面
<template>
<div class="componentB">
</div>
</template>
<script>
import eventVue './eventVue.js'

export default {
data() {
return {}
},
methods: {
byBus() {
eventVue.$emit('byBus',this.byBusData) //组件B $emit触发事件
}
}
}
</script>