vue中组件之间传值

组件之间传值

在vue中，组件之间的传值大致可以分为以下三种：
1.父向子传值：也就是父组件传数据到子组件
2.子向父传值：也就是子组件传数据到父组件
3.非父子传：也就是非父子关系的组件相互传数据

父组件向子组件传值

父项向子项传值主要采用的方法是：props

父组件

<template>
    <div>
        <child :msg="msg"></child>
    </div>
</template>

<script>
import child from './child'
export default {
    components: {
        child
    },
    data() {
        return {
            msg: '父的数据'
        }
    }
}
</script>

子组件

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
export default {
    props: {
        msg: {
            required: true,
            type: String
        }
    }
}
</script>

子组件向父组件传值

子项向父项传递数据通过父项向子项传递方法的时候，将数据通过实参的方式传递给父项。

父组件

<template>
    <div>
        <child :msg="msg" @childMethod="getChildData"></child>
    </div>
</template>

<script>
import child from './child'
export default {
    components: {
        child
    },
    data() {
        return {
            msg: '父的数据'
        }
    },
    methods: {
        getChildData(data) {
            console.log('来自子组件的数据', data)
        }
    }
}
</script>

子组件

<template>
    <div>
        {{msg}}
        <button @click="handleClick">按钮</button>
    </div>
</template>

<script>
export default {
    props: {
        msg: {
            required: true,
            type: String
        }
    },
    data() {
        return {
            childMsg: '子数据'
        }
    },
    methods: {
        handleClick() {
            this.$emit('childMethod', this.childMsg)
        }
    }
}
</script>

非父子组件传值

不是父子关系的组件A与组件B之间传递数据，可以使用一个空的Vue实例来作为事件总线。将这个Vue示例明明为$bus并挂载在Vue的原型上。在A组件中使用‘this.$bus. $emit()‘触发事件在B组件使用‘this.$bus. $on()` 绑定并监听事件（一般在created钩子中）

main.js

import Vue from 'vue'
const bus = new Vue
Vue.prototype.$eventBus = bus

父组件

<template>
    <div>
        <child1></child1>
        <hr>
        <child2></child2>
    </div>
</template>

<script>
import child1 from './child1'
import child2 from './child2'
export default {
    components: {
        child1,
        child2
    },
    data() {
        return {
            msg: '父的数据'
        }
    },
    methods: {
        getChildData(data) {
            console.log('来自子组件的数据', data)
        }
    }
}
</script>

组件A

<template>
    <div>
        <h4>我是child1组件，我要监听child2中的num发生的变化</h4>
    </div>
</template>

<script>
export default {
    created() {
        this.$eventBus.$on('numChange', (data) => {
            console.log('监听到了child2中num变了', data)
        })
    }
}
</script>

组件二

<template>
    <div>
        <h4>我是child2组件，num现在为 {{num}}</h4>
        <button @click="changeNum">num+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 0
        }
    },
    methods: {
        changeNum() {
            ++this.num;
            this.$eventBus.$emit('numChange', this.num)
        }
    }
}
</script>