vue组件间传值

1.父传子案例
创建子组件，在src/components/文件夹下新建一个文件夹，在新建文件夹中新建一个组件Child.vue
在Child.vue中创建props，用于接收父组件传递的值

<template>
    <div>
        我是子组件
        <div v-for = "(item,key) of c" :key="key">
            {{ley}}:{{item}}
        </div>
    </div>
</template>

<script>
export default {
    name:'child',
    props:{
        c:Array
    }
}
</script>

<style lang="less" scoped>

</style>

在父组件中注册Child组件，并在template的div标签中添加home-child标签，标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。

<template>
    <div>
        我是子组件
        <div v-for = "(item,key) of c" :key="key">
            {{key}}:{{item}}
        </div>
    </div>
</template>

<script>
export default {
    name:'child',
    props:{
        c:Array
    }
}
</script>

<style lang="less" scoped>

</style>

2.子传父案例
给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

<template>
    <div>
        我是子组件
        <div v-for = "(item,key) of c" :key="key">
            {{key}}:{{item}}
        </div>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </div>
</template>

<script>
export default {
    name:'child',
    props:{
        c:Array,
        data:String
    },
    methods: {
        ChildClick() {
            this.$emit('ListenChild','I am child.vue')
        }
    },
}
</script>

<style lang="less" scoped>

</style>

在父组件中的home-child标签中监听该自定义事件，并添加一个响应该事件的方法ShowChild。

<template>
    <div class="hello">
        <home-child v-bind:c="c" v-on:ListenChild="ShowChild" :data="data"></home-child>
    </div>
</template>

<script>
import HomeChild from '@/components/common/Child'
export default {
     name:'home',
    components:{
        HomeChild
    },
    data(){
        return{
            c:[1,2,3],
            data:''
        }
    },
    methods:{
        ShowChild(data){
            this.data = data
            console.log(`data:${data}`)
        }
    }
}
</script>

<style lang="less" scoped>

</style>

3.中央事件总线案例

一个中央事件总线bus，可以作为一个简单的组件传递数据，用于解决跨级和兄弟组件通信问题，将bus封装为一个Vue的插件，可以在所有的组件间任意使用，而不需要导入bus。

首先，我们使用vue-cli创建一个项目vue-bus, 在src目录下，新建vue-bus.js文件，vue-bus插件像vue-router 和 Vuex一样，给Vue对象添加一个属性$bus,并代理$emit、$on、$off三个方法。代码如下：

const install = (Vue) => { 
    const Bus = new Vue({
        methods: {
            emit(event, ...args) { 
                this.$emit(event,...args)
            },
            on(event, callback) { 
                this.$on(event,callback)
            },
            off(event,callback) { 
                this.$off(event,callback)
            }
        },
    })

    Vue.prototype.$bus = Bus

}

export default install

在main.js中使用插件，代码如下：

import VueBus from './vue-bus'
Vue.use(VueBus)

接下来，在views目录下，新建一个组件 Counter.vue,代码如下：

<template>
    <div>
        {{number}}
        <button @click="handleAddRandom">随机增加</button>
    </div>
</template>

<script>
export default {
    props:{
        number:{
            type:Number
        }
    },
    methods: {
        handleAddRandom() {
                // 随机取 1 ~ 100
                const num = Math.floor(Math.random() * 100 + 1)
                this.$bus.emit('add',num)
        }
    },
}
</script>

在index.vue 组件中，使用Counter组件并监听来自counter.vue的自定义事件，代码如下：

<template>
    <div>
        <!-- 随机增加 -->
        <Counter :number="number"></Counter>
    </div>
</template>

<script>

// 引入组件Counter
import Counter from '../views/Counter.vue'

export default {
    components:{
        Counter
    },
    data(){
        return{
            number:0
        }
    },
    created () {
        // 接收数据
        this.$bus.on('add',num => {
            this.number += num
        })
    }
}
</script>