vue 中子組件或者公共組件向上一級傳遞數據 $emit的使用

在子組件或者公共組件中，定義一個方法例如

<li @click="selectItem(item)" v-for="item in group.items" class="list-group-item">

　　然后在methods中使用

selectItem(item){
        this.$emit('select',item);
}

$emit中的兩個參數的含義是，一個是傳遞給父組件的方法，一個是傳遞給父組件方法的參數。

也就是說，父組件通過使用子組件通過$emit傳遞的方法select及其參數，來得到傳遞的數據。

並且，父組件直接使用的select方法其實就是自定義方法的用法，觸發這種自定義方法就是子組件觸發傳遞$emit的方法，也就是click。

例

 <ListView @select='selectSinger' :data="singers"></ListView>

此處select既是子組件通過$emit傳遞的自定義方法

selectSinger則是父組件接收select所帶的參數的方法

selectSinger(singer) {
        this.$router.push({
          path:`/singer/${singer.id}`
        })
 }

參數singer既是子組件$emit所傳遞的item參數。

 

若是有用並覺得不錯，可以贊一個喲