Vue組件之間傳值

父組件向子組件傳值

• 父組件發送的形式是以屬性的形式綁定值到子組件身上。

• 而後子組件用屬性props接收

• 在props中使用駝峯形式，模板中須要使用短橫線的形式，字符串形式的模板中沒有這個限制

  <div id="app">
    <div>{{pmsg}}</div>
     <!--一、menu-item 在 APP中嵌套着 故 menu-item   爲 子組件     -->
     <!-- 給子組件傳入一個靜態的值 -->
    <menu-item title='來自父組件的值'></menu-item>
    <!-- 二、 須要動態的數據的時候 須要屬性綁定的形式設置 此時 ptitle 來自父組件data 中的數據 . 
   傳的值能夠是數字、對象、數組等等
 -->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>
​
  <script type="text/javascript">
    Vue.component('menu-item', {
      // 三、 子組件用屬性props接收父組件傳遞過來的數據  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子組件自己的數據'
       }
     },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
   });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內容',
        ptitle: '動態綁定屬性'
     }
   });
  </script>

 

 

子組件向父組件傳值

• 子組件用$emit()觸發事件

• $emit() 第一個參數爲 自定義的事件名稱 第二個參數爲須要傳遞的數據

• 父組件用v-on 監聽子組件的事件

​
 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父組件用v-on 監聽子組件的事件
  這裏 enlarge-text 是從 $emit 中的第一個參數對應   handle 爲對應的事件處理函數 
 --> 
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
     子組件向父組件傳值-攜帶參數
   */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
   ### 一、子組件用$emit()觸發事件
   ### 第一個參數爲 自定義的事件名稱   第二個參數爲須要傳遞的數據  
          <button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button>
          <button @click='$emit("enlarge-text", 10)'>擴大父組件中字體大小</button>
        </div>
      `
   });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內容',
        parr: ['apple','orange','banana'],
        fontSize: 10
     },
      methods: {
        handle: function(val){
          // 擴大字體大小
          this.fontSize += val;
       }
     }
   });
  </script>
​

兄弟之間的傳遞

 

 

• 兄弟之間傳遞數據須要藉助於事件中心，經過事件中心傳遞數據

  • 提供事件中心 var hub = new Vue()

• 傳遞數據方，經過一個事件觸發hub.$emit(方法名，傳遞的數據)

• 接收數據方，經過mounted(){} 鉤子中 觸發hub.$on(方法名，函數體)

  • 銷燬事件 經過hub.$off(方法名)銷燬以後沒法進行傳遞數據

 <div id="app">
    <div>父組件</div>
    <div>
      <button @click='handle'>銷燬事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
     兄弟組件之間數據傳遞
   */
    //一、 提供事件中心
    var hub = new Vue();
​
    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
       }
     },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //二、傳遞數據方，經過一個事件觸發hub.$emit(方法名，傳遞的數據)   觸發兄弟組件的事件
          hub.$emit('jerry-event', 2);
       }
     },
      mounted: function() {
       // 三、接收數據方，經過mounted(){} 鉤子中 觸發hub.$on(方法名，函數)
        hub.$on('tom-event', (val) => {
          this.num += val;
       });
     }
   });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
       }
     },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //二、傳遞數據方，經過一個事件觸發hub.$emit(方法名，傳遞的數據)   觸發兄弟組件的事件
          hub.$emit('tom-event', 1);
       }
     },
      mounted: function() {
        // 三、接收數據方，經過mounted(){} 鉤子中 觸發hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
       });
     }
   });
    var vm = new Vue({
      el: '#app',
      data: {
        
     },
      methods: {
        handle: function(){
          //四、銷燬事件 經過hub.$off()方法名銷燬以後沒法進行傳遞數據  
          hub.$off('tom-event');
          hub.$off('jerry-event');
       }
     }
   });
  </script>
​