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進行數據傳遞；