Vue踩坑記錄

1、使用this.$emit 子組件向父組件傳遞事件以及攜帶數據
在標籤內調用 methods:{ } 中的方法時候是不能夠加()的,一定是直接寫方法名稱即可, 否則傳遞的參數數據無效。

<list v-show="listShow" :listData="listData" @titleHandle = "showTitle"></list>
這裏的titleHandle是監聽子組件傳遞過來的事件(帶有參數),showTitle是父組件監聽成功之後在父組件內執行的方法,【注意這裏@titleHandle = "showTitle"的showTitle後面不能加(),裏面也不能傳參】
子組件:
methods:{
    getTitle(title){
        this.$emit('titleHandle',title)
    }
},
父組件:
methods: {
    showTitle(title){
        console.log(title)
    }
},

2、在vue組件內,如果要對組件內的數據做邏輯判斷,那麼這個邏輯應該寫在計算屬性computed內,一般不放在模板內

computed:{
    num(){ //在模板裏面直接{{num}}即可
        return ...   //這裏面對值做邏輯處理、篩選等等
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章