前端筆記Vue項目day3(三）

子組件向父組件傳值
子組件用$emit()觸發事件
$emit() 第一個參數爲 自定義的事件名稱 第二個參數爲需要傳遞的數據
父組件用v-on 監聽子組件的事件
[mw_shl_code=applescript,true]<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>
                    ###  1、子組件用$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>
[/mw_shl_code]
兄弟之間的傳遞
兄弟之間傳遞數據需要藉助於事件中心，通過事件中心傳遞數據
提供事件中心 var hub = new Vue()

傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據)
接收數據方，通過mounted(){} 鉤子中 觸發hub.$on()方法名
銷燬事件 通過hub.$off()方法名銷燬之後無法進行傳遞數據
[mw_shl_code=applescript,true]<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">
/
兄弟組件之間數據傳遞
/
//1、 提供事件中心
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(){
      //2、傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據)   觸發兄弟組件的事件
      hub.$emit('jerry-event', 2);
    }
  },
  mounted: function() {
   // 3、接收數據方，通過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(){
      //2、傳遞數據方，通過一個事件觸發hub.$emit(方法名，傳遞的數據)   觸發兄弟組件的事件
      hub.$emit('tom-event', 1);
    }
  },
  mounted: function() {
    // 3、接收數據方，通過mounted(){} 鉤子中  觸發hub.$on()方法名
    hub.$on('jerry-event', (val) => {
      this.num += val;
    });
  }
});
var vm = new Vue({
  el: '#app',
  data: {

  },
  methods: {
    handle: function(){
      //4、銷燬事件 通過hub.$off()方法名銷燬之後無法進行傳遞數據  
      hub.$off('tom-event');
      hub.$off('jerry-event');
    }
  }
});

</script>
[/mw_shl_code]