Vue自定義事件

Vue 自定義事件

 自定義事件

接上一篇部落格 Vue插槽slot了解與初體驗 ~

一、自定義方法

//圖書清單元件
    Vue.component('book-component-list',{
        props: ['l'],
        template: '<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove"/></li>'
        ,methods: {
            remove: function(){
                alert("remove method");
            }
        }
    });
           

通過

v-on:click="事件名"

綁定，簡寫形式：

@cilck="方法名"

二、需要删除清單資料

1. 在Vue執行個體中定義方法

//圖書清單元件
    Vue.component('book-component-list',{
        props: ['l'],
        template: '<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="removeItems"/></li>'
        ,methods: {
            remove: function(){
                alert("remove method");
            }
        }
    });
    let vApp = new Vue({
        el: '#app'
        ,data: {
            title: '圖書清單'
            ,list: [
                '紅樓夢','三國演義','水浒傳','西遊記'
            ]
        }
        ,methods: {
            removeItems: function(){
                alert("vue removeItems");
            }
        }
    });
           

将vue執行個體的removeItems方法綁定到删除按鈕上發現不能直接調用該方法，但同時Vue綁定了前端頁面，id=app的div标簽，前端頁面是可以調用removeItems方法的。是以可以通過前端頁面綁定removeItems方法，然後自定義事件傳遞給子元件

2. 前端綁定Vue方法

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="li in list" v-bind:l="li" v-on:remove-item="removeItems"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //圖書元件
    Vue.component('book-component',{
        template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>'
    });
    //圖書标題元件
    Vue.component('book-component-title',{
        props: ['ti'],
        template: '<h3>{{ti}}</h3>'
    });
    //圖書清單元件
    Vue.component('book-component-list',{
        props: ['l'],
        template: '<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove"/></li>'
        ,methods: {
            remove: function(){
                this.$emit("remove-item");//
            }
        }
    });
    let vApp = new Vue({
        el: '#app'
        ,data: {
            title: '圖書清單'
            ,list: [
                '紅樓夢','三國演義','水浒傳','西遊記'
            ]
        }
        ,methods: {
            removeItems: function(){
                alert("vue removeItems");
            }
        }
    });
</script>
           

3. 傳遞删除參數（index）

• 前端自定義方法

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="(li,index) in list" v-bind:l="li" v-bind:inlist="index" v-on:remove-item="removeItems(index)"></book-component-list>
    </book-component>
</div>
           

• 元件自定義方法

//圖書清單元件
    Vue.component('book-component-list',{
        //該元件方法中的參數不能省略，因為它綁定了每個item的索引，必須傳到下一個方法。
        //看過一個視訊給下面參數全省略了，雖然能删除，但他的删除是預設一個一個删除，也就是無論點哪個按鈕都會從第一個删除
        props: ['l','inlist'],
        template: '<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove(inlist)"/></li>'
        ,methods: {
            remove: function(inlist){
                this.$emit("remove-item",inlist);
            }
        }
    });
           

• Vue

let vApp = new Vue({
        el: '#app'
        ,data: {
            title: '圖書清單'
            ,list: ['紅樓夢','三國演義','水浒傳','西遊記']
        }
        ,methods: {
            removeItems: function(index){
                this.list.splice(index,1);//js的方法
            }
        }
    });
           

• 整體代碼

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="(li,index) in list" v-bind:l="li" v-bind:inlist="index" v-on:remove-item="removeItems"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //圖書元件
    Vue.component('book-component',{
        template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>'
    });
    //圖書标題元件
    Vue.component('book-component-title',{
        props: ['ti'],
        template: '<h3>{{ti}}</h3>'
    });
    //圖書清單元件
    Vue.component('book-component-list',{
        props: ['l','inlist'],
        template: '<li>{{l}}<input style="margin-left: 20px" type="button" value="删除" v-on:click="remove(inlist)"/></li>'
        ,methods: {
            remove: function(inlist){
                this.$emit("remove-item",inlist);
            }
        }
    });
    let vApp = new Vue({
        el: '#app'
        ,data: {
            title: '圖書清單'
            ,list: ['紅樓夢','三國演義','水浒傳','西遊記']
        }
        ,methods: {
            removeItems: function(index){
                console.log(index);
                this.list.splice(index,1);//js的方法
            }
        }
    });
</script>