1、组件间的传值

1.1 父组件向子组件传值

子组件自定义一个属性

父组件通过自定义属性绑定值

子组件调用自定义属性来拿到值

1.1 完）

1.2 子组件向父组件传值

子组件自定义一个事件

父组件通过自定义事件绑定一个方法来接收值

1.3 兄弟组件间传值

新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）

组件1把值先传到bus

组件2从bus接收值

【完整代码】

parent.vue（父组件）

import Children1 from './children1'

  import Children2 from './children2'

    export default {

        name: "parent",

      components:{

        Children1,

        Children2

      },

      data(){

          return {

            toChildren:'',

            getChildren:''

          }

      },

      methods:{

          getChildrenData(data){

            this.getChildren = data;

          }

      }

    }  body{

    background: #eee;

  }

  .container{

    width: 100%;

  }

  .header{

    width: 100%;

  }

  .main{

    width: 985px;

    margin: 50px auto;

  }

  .children1,.children2{

    width: 40%;

    height: 300px;

    margin: 0 20px;

    display: inline-block;

    background: #909399;

    color: #fff;

  }

  .getData{

    color: darkred;

    height: 50px;

  }

children1.vue 子组件1

import bus from '../eventBus/bus'

    export default {

        name: "children",

      props:['getData'],    //子组件自定义一个属性

      data(){

          return {

            toBrother:''

          }

      },

      methods:{

        dataToBrother(){

          bus.$emit('toBrother',this.toBrother)

        }

      }

    }  h1{

    height: 50px;

    color: darkred;

  }

children2.vue 子组件2

import bus from '../eventBus/bus'

    export default {

        name: "children2",

      data(){

          return {

            toParentData:'',

            dataFromBrother:''

          }

      },

      created(){

          bus.$on('toBrother',(data)=>{

            this.dataFromBrother = data;

          })

      },

      methods:{

        dataToParent(){

          this.$emit('toParent',this.toParentData)

        }

      }

    }  h1{

    height: 50px;

    color: darkred;

  }

bus.js

import Vue from 'vue'

export default new Vue