vue 2.x之组件的数据传递（一）

这是根据官方提供的脚手架vue-cli搭建，通过简单的案例来介绍vue数据的传递的方式，根据自己平时用到的，来做简单的总结；

1.父组件传递数据给子组件

父组件传递数据给子组件，需要把子组件引入，并挂载到当前父组件的vue实例上，这样父组件就能访问到该组件。子组件上自定一个方法来作为传的桥梁，在子组件上使用props来接收数据；

父组件：

 1 <template>
 2   <div class="hello">
 3     <child-comp v-bind:send-info='sendInfo'></child-comp>
 4   </div>
 5 </template>
 6
 7 <script>
 8 //引入子组件
 9 import  childComp  from  './son';
10 export default {
11   name: 'father',
12   data () {
13     return {}
14   },
15   computed:{
16     //需要传递的信息
17     sendInfo(){
18       let sendSonInfo;
19       sendSonInfo ={
20           age:'18',
21           name:'zhangsan'
22       };
23       return sendSonInfo;
24     }
25   },
26 //挂载到vue的实例上
27   components:{
28     childComp
29   }
30 }
31 </script>

子组件:

<style type="text/css"></style>
<template>
    <div class="son">
        <div class="name">
            {{sendInfo.name}}
        </div>
        <div class="age">
            {{sendInfo.age}}
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        name:'son',
        data(){
            return {}
        },
        props:{
            //子组件接收父组件传递来的数据
            sendInfo:{
                type:Object,  //传递的数据类型
                required:true,  //是否必须
                default:{}   //默认传递类型
            }
        }
    }
</script>

在父组件中引入子组件，使用v-bind（缩写：）动态绑定组件prop到表达式；

在子组件中使用props来接收传递过来的数据；

2.子组件传递给父组件数据

既然父组件能传递数据给子组件数据，那么子组件也要能出传递数据给父组件，同样也要在父组件引入，挂载，同时要定义一个方法来接收子组件传递来的数据，而子组件通过 $emit 来实现数据传递；第一个参数是父组件定义的方法名，第二个参数是要传递的数据，可以是字符串，Boolean，对象，数组等；

子组件：

<style type="text/css"></style>
<template>
    <div class="son"></div>
</template>
<script type="text/javascript">
    export default {
        name:'son',
        data(){
            return {}
        },
        mounted(){
            this.$emit('get-info','我是子组件传递来的数据');
        }
    }
</script>

父组件:

<template>
  <div class="hello">
    <child-comp v-on:get-info='getInfo'></child-comp>
    <div>{{data}}</div>
  </div>
</template>

<script>
//引入组件
import  childComp  from  './son';
export default {
  name: 'father',
  data () {
    return {
      data:'' // 定义变量来接收子组件传递来的数据
    }
  },
  methods:{
  //接收子组件传递来的数据
    getInfo(val){
      this.data = val;
    }
  },
  //挂载到vue的实例上
  components:{
    childComp
  }
}
</script>

父组件接收子组件数据，用v-on（缩写@）绑定事件监听器。

3.兄弟组件的数据传递

在父子组件数据的传递的过程，还有兄弟组件的数据传递。兄弟组件的传递需要借助于一个空的vue实例来实现，如果传递的数据量不大，可以用此方法，如果大量数据的传输，要使用vuex来实现数据的传递。下面实例来展示非vuex方式的兄弟组件的数据传递；

1. 在main.js里的实例上挂载一个空的vue实例，来作为兄弟组件数据传递的桥梁

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App'
   import router from './router'
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     template: '<App/>',
     components: { App },
   
     data:{
         eventBus:new Vue()  //创建eventBus的vue实例，作为桥梁
     }
   })

   2.在父组件中引入兄弟组件

   <template>
     <div class="hello">
       <child-comp></child-comp>
       <brother-comp></brother-comp>
     </div>
   </template>
   
   <script>
   //引入组件
   import  childComp  from  './son';
   import  brotherComp from './brother';
   export default {
     name: 'father',
     data () {
       return {}
     },
     components:{
       childComp,
       brotherComp
     }
   }
   </script>

   3.在组件里添加方法和要传递的数据

   <style type="text/css"></style>
   <template>
       <div class="son">
           <input type="button" name="" value="确定" @click='sendInfo'>
       </div>
   </template>
   <script type="text/javascript">
       export default {
           name:'son',
           data(){
               return {}
           },
           methods:{
               sendInfo(){
                   this.$root.eventBus.$emit('sendBrotherinfo','我是兄弟组件');
               }
           }
       }
   </script>

   4.在兄弟组件里接收传来的数据

   <template>
       <div class="brother">
           <div>{{data}}</div>
       </div>
   </template>
   <script type="text/javascript">
       export default{
           name:'brother',
           data(){
               return {
                   data:'' //声明变量来接收
               }
           },
           created(){
               this.$root.eventBus.$on('sendBrotherinfo', val =>{
                   console.log(val);
                   this.data = val;
               });
           }
       }
   </script>

   以上组件只能实现单个页面，不同组件的数据传递，如果想要在不同页面的数据传递，这就要借助于vuex来实现，下一篇来介绍vuex和使用vuex进行数据传递；