元件之間傳值

• 父元件向子元件傳值使用props，參考：父元件向子元件傳值！
• 子元件向父元件傳值，主要是以下三個步驟組成：

1. 在子元件中自定義一個事件，使用 this.$emit('btn-click', item)的語法，emit指代發射事件，btn-click是我們自定義的事件名，item是子元件中的資料。 注意：：vue官方推薦你始終使用 kebab-case格式的事件名。
2. 在父元件中使用v-on監聽在子元件中我們自定義的陣列，併為其在父元件中定義一個接收監聽的事件
3. 在父元件中接收資料

老規矩，看程式碼：

    <div id="app">
      <main-view @btn-click="descclick"></main-view>
      <p>分類id：{{ id }} <br>名稱name：{{ name }}</p>
    </div>
    
    <template id="desc-view">
      <div>
        <button type="button" @click="itemClick(item)" v-for="item in categorylist">{{ item.name }}</button>
      </div>
    </template>
    
    <script type="text/javascript">
      
      Vue.component('main-view',{
        template:"#desc-view",
        data:function(){
          return{
            message: 'Hello Vue',
            categorylist:[
              {id: 1, name: '生鮮優選'},
              {id: 2, name: '手機數碼'},
              {id: 3, name: '家用電器'},
              {id: 4, name: '電腦辦公'},
            ]
          }
        },
        methods:{
          // 子元件中定義	
          itemClick: function(item){
            // 發射自定義事件
            this.$emit('btn-click', item)
          }
        }
      });
      
      const app = new Vue({
        el: "#app",
        data:{
          id: '',
          name:''
        },
        methods:{
          // 接收事件，父元件中接收
          descclick:function(item){
            categorylist = ('descclick', item)
            console.log('descclick', item)
            this.id = categorylist.id
            this.name = categorylist.name
          }
        }
      })
    </script>
 

元件之間的事件傳遞：

元件之間的事件傳遞多是通過 $emit 和 $on 來進行的，所以我們需要先來看一下這兩個 API 的使用方式。

首先是 vm.$emit( eventName, […args] )，它用於觸發當前例項上的事件，第一個引數為被觸發事件的名稱，第二個引數為傳遞給被觸發事件的引數，可以為多個, 開篇已經說過，也有一個簡單的例子。

然後是 vm.$on( event, callback )，它用於在當前例項中建立一個自定義的事件，事件可以由 vm.$emit 觸發。第一個引數為事件名稱，第二個引數為當事件被觸發時執行的回撥方法。

這兩個方法的使用還是比較簡單的，接下來我們就看一下不同的元件之間如何通過這兩個方法來進行事件傳遞。還是以上一章中講解 props

• 提醒：注意props中屬性的命名方式，是忽略大小寫的，所以大寫的屬性有可能不能識別！

<div id="app">
    <main-view></main-view>
</div>

<template id="main-view">
    <div>
      <button @click="onChangeDescClick('Android')">Android</button>
      <button @click="onChangeDescClick('IOS')">IOS</button>
      <button @click="onChangeDescClick('Vue')">Vue</button>
      <button @click="onDescFontSizeClick()">DescFontSize++</button>

      <desc-view :pushSubDescObj='descObj'></desc-view>
    </div>
</template>

<template id="desc-view">
    <div>
      <h1>{{pushsubdescobj.title}}</h1>
      <p :style="{fontSize: fontSize + 'px'}">{{pushsubdescobj.desc}}</p>
    </div>
</template>

<script>
    Vue.component('desc-view', {
        template: "#desc-view",
        props: {
            pushsubdescobj: {
                type: Object,
                default: function () {
                    return { 
                        title: '這是一個預設的標題',
                        desc: '這是一個預設的內容'
                    }
                }
            }
        },
        data: function () {
            return {
                fontSize : 12
            }
        },
        created () {
            var $this = this;
            // 接收事件，當前例項vm接收自定義事件
            this.$root.$on('btn-click', function (size) {
                $this.fontSize += size;
                // 接收到的資料
                console.log('btn-click', 1)
            });
        }
    });

    Vue.component('main-view', {
        template: '#main-view',
        data: function () {
            return {
                descObj: {
                    title: 'Android',
                    desc: '這是Android的描述資訊'
                }
            }
        },
        methods: {
            onChangeDescClick: function (type) {
                this.descObj.title = type;
                this.descObj.desc = '這是' + type + '的描述資訊';
            },
            
            // btn-click自定義事件的名稱
            onDescFontSizeClick: function () {
                this.$root.$emit('btn-click', 1);
            }
        },
        created() {
        },
    });

    var vm = new Vue({
        el: '#app'
    });
</script>
 

首先在 desc-view 中通過 this.$root 來獲取當前的 vm(app) 例項，接收了一個 btn-click 自定義事件，該事件被呼叫的時候會改變 data 中的 fontSize 的值，使其自增 size。

然後在 main-view 中新增一個 onDescFontSizeClick 方法，當用戶呼叫onDescFontSizeClick方法的時候，會通過 this.$root.$emit('btn-click', 1); 來啟用 btn-click 事件，並傳入了一個引數，匹配 size 為 1。

也就是說當點選 DescFontSize++ 按鈕的時候，desc-view 中的 <p> 標籤展示的文字大小會自增 1。

感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"。碼雲上有我們開源的商城專案，知識付費專案，JAVA版全開源商城系統，學習研究歡迎使用，老鐵順手點個star唄，老闆獎勵五毛，分你兩毛五，