VUE之组件传值

vue中组件传值常用有3种情况，分别是父组件给子组件传值、子组件给父组件传值以及平级组件间传值。下面分别介绍以上三种情况：

一、父组件给子组件传值

父组件给子组件传值利用的是props属性，即在子组件中定义props属性，然后在父组件调用子组件时，赋值相关prop参数，这样即可在子组件中取用相关prop参数，例如：

子组件中定义props参数：

Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' })

父组件中调用子组件：

<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>

二、子组件给父组件传值

子组件给父组件传值是利用事件监听，也就是在父组件中调用子组件的地方，定义一个事件来等待子组件触发，子组件中一旦触发该事件，那么父组件就可以监听到该事件并执行后续操作来处理该事件，例如：

①不带参数：

父组件中定义监听事件(定义的事件为enlarge-text):

<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post>

子组件中触发事件：

<button v-on:click="$emit('enlarge-text')"> Enlarge text </button>

②带参数：

父组件中定义监听事件(定义的事件为enlarge-text):

<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post>

子组件中触发事件：

<button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button>

父组件中监听到事件后处理可能是个表达式，例如上面，也可能是函数，那么就如下面：

父组件中定义监听事件(定义的事件为enlarge-text):

<blog-post ... v-on:enlarge-text="onEnlargeText" ></blog-post>

父组件中处理函数（enlargeAmount即为子组件传递的参数）：

methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } }

子组件中触发事件：

<button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button>

三、平级组件间传值

上面两种传值情况，无论哪种都需要一个中间介质，比如子传父需要事件介质，父传子需要prop介质，平级组件间传值一样需要介质，它所需要的介质是一个中央事件总线，那么什么是中央事件总线，其实简单来说就是一个普通的组件，只不过这个组件里面什么都没有，就是用来传递值的。其流程即为从一个组件中触发中央事件总线的事件，另一个组件中监听该事件到并取值处理。例如：

首先我们先定义一个中央事件总线（eventBus.js）内容如下：

import Vue from 'Vue'

export default new Vue;

接着我们在定义第一个组件（firstChild）组件，内容如下：

<template>

<div id="firstChild">

        <h2>firstChild组件</h2>

        <button v-on:click="sendMsg">向组件传值</button>

</div>

</template>

<script>

        import bus from '../eventBus';

        export default{

                methods:{

                       sendMsg:function(){

                                bus.$emit("userDefinedEvent","this message is from firstChild");

                        } 

                }

        }

</script>

然后我们在定义第一个组件（secondChild）组件，内容如下：

<template>

<div id="secondChild">

        <h2>secondChild组件</h2>

        <p>从firstChild组件接收的参数：{{msg}}</p>

</div>

</template>

<script>

        import bus from '../eventBus';

        export default{

                data(){

                        return{

                                msg:"默认值"

                        }

                }

                mounted(){

                        var self=this        

                        bus.$on("userDefinedEvent",function(msg){

                                self.msg = msg

                        })

                }

        }

</script>