Vue学习笔记之组件传值

前言

在Vue开发过程中总会遇到组件之间传值的问题，这里总结一下现在学习到的组件之间的传值方法。

组件传值个人感觉可以分为两种:

• 父子组件之间传值
• 兄弟组件之间传值

组件传值个人感觉的方法有以下几种:

• props传参
• 事件传递
• 事件监听
• 消息发布与订阅
• EventBus传参

正文

父子组件传值

父组件传值给子组件

实现父组件传值给子组件，可以使用props向下传递数据给子组件。

大体思路方法就是：

1. 在子组件中声明prop（Prop官方学习文档）；
2. 在父组件中使用v-bind来进行值的传递；

代码示例：

父组件

/// Father.vue
<template>
    <div>
        <son :msg="message"/>
    </div>
</template>

<script>
import son from './sonComponent'
export default {
    name: 'father',
    components: {
      son  
    },
    data () {
        return {
            message: '我是要传递给子组件的值呀'
        }
    }
}
</script>

子组件

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

<script>
export default {
    name: 'son',
    prop: {
      msg: String  
    }
}
</script>

子组件传值给父组件

实现子组件传值给父组件，可以使用事件传递、事件监听来进行传值。

大体思路方法就是：

1. 在子组件中使用$emit进行一个事件组册、传递；
2. 在父组件中，使用v-on来进行事件的监听；

父组件

<template>
    <div>
        {{ message }}
        <son @sendMsg="updateMsg"/>
    </div>
</template>

<script>
import son from './sonComponent'
export default {
    name: 'father',
    components: {
      son  
    },
    data () {
        return {
            message: ''
        }
    },
    method: {
        updateMsg (val) {
            this.message = val
        }
    }
}
</script>

子组件

<template>
    <div>
       <el-button @click="test">测试</el-button>
    </div>
</template>
<script>
export default {
    name: 'son',
    method: {
        test () {
            this.$emit('sendMsg', '我是子组件传过来的值呀')
        }
    }
}

兄弟组件传值

事件传递、事件监听

跟上述讲的子组件传值给父组件一样，使用$emit进行事件的注册和传递；在接受值的组件中使用v-on来进行事件的监听。

消息发布与订阅

vuex官方学习资料

EventBus传参

EventBus又称事件总线。就像是所有组件共用相同的事件中心，即可以向该中心注册发送事件，又可以通过该中心接收事件，所有组件都可以上下行地通知其他组件。

这里只是简单描述一下EventBus（其实是我了解学习的还不是很深）,后续再整理一篇单独的EventBus的学习笔记。