1.父组件向子组件传值
父组件传值
<template>
<div>
<son :sonName="name"
:sonTitle="title"></son> // 子组件
</div>
</template>
<script>
import son from '../components/son'
export default {
data () {
return {
name: 'Tom',
title: 'vue父组件向子组件传值'
}
},
components: {
son
}
}
</script>
子组件接收
<template>
<div>
{
{
sonName}}
{
{
sonTitle}}
</div>
</template>
<script>
export default {
props: {
// 接收父组件的传值
sonName: {
type: String
},
sonTitle: {
type: String,
default: ''
}
}
}
2.子组件向父组件传值（$emit）
子组件传值
子组件传值
<template>
<div>
<button @click="toFather">传值</button>
</div>
</template>
<script>
export default {
data () {
return {
name: 'Tom',
}
},
methods: {
toFather () {
this.$emit('handleChange', this.name)
}
}
}
</script>
父组件接收
<template>
<div>
<son @handleChange="loadSon"></son>
</div>
</template>
<script>
import son from '../components/son'
export default {
methods: {
loadSon (name) {
console.log(name) // 接收到子组件传过来的值
}
},
components: {
son
}
}
</script>
3.兄弟组件之间传值（bus.js）
方法一
1.在main.js中，new一个空的vue挂在到vue原型上：
Vue.prototype.$bus = new Vue();
2.在demo.vue中使用bus发送数据（可以通过点击事件触发）
this.$bus.$emit("sendData",{
data:"需要发送的数据"})
3.在另一个test.vue中接收数据（可以写在created生命周期函数中）
this.$bus.$on("sendData",d=>{
console.log(d)})
方法二
1.新建bus.js
import Vue from 'vue'
export default new Vue
2.在需要传值和接受值的vue文件中，各自引入bus.js
import bus from '../util/bus'
3.定义传值的方法，使用bus.$emit(‘methodName’,data), methodName是自定义的方法名
<button @click="trans()">传值</button>
methods: {
trans(){
bus.$emit('test',this.helloData)
}
}
4.在要接收值的组件里，使用bus.on(‘methodName’,val =>{ }) ,val 就是传过来的值
mounted(){
bus.$on('test',val=>{
console.log(val);
this.cdata = val
})
}
如果要传多个值：
bus.$emit('test',data1,data2,data3……)
同样接收时候，需要接收多个值
bus.$on(test,(val,val2,val3……)=>{
console.log(val,val2,val3)
})
如果需要不触发事件，就把值传递给兄弟组件，那么必须通过异步的方法传递，例如axios或者setTimeout
// 不通过点击事件，把数据传递给兄弟组件，一定要setTimeout,或者axios请求
setTimeout(() => {
bus.$emit('test',data)
}, 2000);