vue2.0组件之间的传值--新入坑，请指教

prop down   emit up

嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑，这是什么意思（大神总结的，我也就是拿来用用）

“down”—>指的是下的意思，即父组件向子组件传值，用props；“up”—>指的是上的意思，即子组件想父组件传值，用emit。

1.子组件向父组件的传值：

Child.vue

<template>  <div class="child">    <h1>子组件</h1>    <button v-on:click="childToParent">想父组件传值</button>  </div></template><script>  export default{    name: ‘child‘,    data(){      return {}    },    methods: {      childToParent(){        this.$emit("childToParentMsg", "子组件向父组件传值");      }    }  }</script>

parent.vue

<template>  <div class="parent">    <h1>父组件</h1>    <Child v-on:childToParentMsg="showChildToParentMsg" ></Child>  </div></template><script>  import Child from ‘./child/Child.vue‘  export default{      name:"parent",    data(){      return {      }    },    methods: {      showChildToParentMsg:function(data){        alert("父组件显示信息："+data)      }    },    components: {Child}  }</script>

2.父组件向子组件传值

parent.vue

<template>  <div class="parent">    <h1>父组件</h1>    <Child v-bind:parentToChild="parentMsg"></Child>  </div></template><script>  import Child from ‘./child/Child.vue‘  export default{     name:"parent",    data(){      return {        parentMsg:‘父组件向子组件传值‘      }    },    components: {Child}  }</script>

child.vue

<template>  <div class="child">    <h1>子组件</h1>    <span>子组件显示信息：{{parentToChild}}</span><br>  </div></template><script>  export default{    name: ‘child‘,    data(){      return {}    },    props:["parentToChild"]  }</script>

3.采用eventBus.js传值---兄弟组件间的传值

eventBus.js

import Vue from ‘Vue‘

export default new Vue()

App.vue

<template>  <div id="app">    <secondChild></secondChild>    <firstChild></firstChild>  </div></template>

<script>import FirstChild from ‘./components/FirstChild‘import SecondChild from ‘./components/SecondChild‘

export default {  name: ‘app‘,  components: {    FirstChild,    SecondChild,  }}</script>

FirstChild.vue

<template>  <div class="firstChild">    <input type="text" placeholder="请输入文字" v-model="message">    <button @click="showMessage">向组件传值</button>    <br>    <span>{{message}}</span>  </div></template><script>  import bus from ‘../assets/eventBus‘;  export default{    name: ‘firstChild‘,    data () {      return {        message: ‘你好‘      }    },    methods: {      showMessage () {       alert(this.message)        bus.$emit(‘userDefinedEvent‘, this.message);//传值      }    }  }</script>

SecondChild.vue

<template>    <div id="SecondChild">        <h1>{{message}}</h1>    </div></template><script>    import bus from ‘../assets/eventBus‘;    export default{        name:‘SecondChild‘,        data(){            return {                message: ‘‘            }        },        mounted(){            var self = this;            bus.$on(‘userDefinedEvent‘,function(message){                self.message = message;//接值            });        }    }