Detailed explanation of Vue's custom event content distribution

1. This is a bit complicated to understand, I hope you can read the principle carefully and type it yourself:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <todo>
        <xian slot="xian" :title="title"></xian>
        // It is recommended to read from the back to the front, and understand that the traversed value is assigned to v-bind, and the value of v-bind is assigned to the value of the same name in props // [Reminder] v-on: The bound custom event name will automatically become lowercase. If someone uses uppercase event name, the following this.$emit is still uppercase and will not bind <yu slot="yu" v-for="(item,index) in items"
            v-bind:item="item" v-bind:index="index"
            v-on:remove="deleteItems(index)"></yu>
        // The Vue instance binds data and methods to the View layer, and the View layer distributes these data and methods to the components below for binding. The View is equivalent to transferring the data and methods of the Vue instance to the components for control</todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    Vue.component("todo",{
       template: '<div>\
                        <slot name="xian"></slot>\
                        <ul>\
                            <slot name="yu"></slot>\
                        </ul>\
                    </div>'
    });
    Vue.component("xian",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("yu",{// props is the parameter name, similar to the variable name, which can be defined at will. v-bind binds to the variable, which is the data and the defined variable props: ['item', 'index'],
        // Can only bind the method of the current component template: '<li>{{index}}---->{{item}}<button @click="remove">delete</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit custom event distribution // [Note] this.$emit('event name') should use kebab-case (short dash naming), not camelCased;
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "Author",
            items: ['Salted Fish Turns Over 1', 'Salted Fish Turns Over 2', 'Salted Fish Turns Over 3']
        },
        methods: {
            deleteItems: function (index) {
                console.log("You deleted "+this.items[index]);
                this.items.splice(index,1);
            }
        }
    });
</script>

</body>
</html>

Running results:

insert image description here

When we click Delete, we can delete any author name. Here I click Delete the second one, and the result is as follows:

insert image description here

2. Here is a picture for everyone to understand:

insert image description here

The understanding is probably like this: methods between components and instances cannot be interoperable, and the node to be deleted belongs to the attribute of the instance, so through event distribution, the method defined in the component is transferred to the method defined in the instance, and then the node is deleted.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

A detailed explanation of Vue's most comprehensive summary of "content distribution slot"
Play with Vue's slot content distribution
Vue content distribution slot (comprehensive analysis)
Detailed explanation of Vue learning notes introduction: component content distribution (slot)
Detailed explanation of slot content distribution example of Vuejs eleventh component

<<: Running PostgreSQL in Docker and recommending several connection tools

>>: A brief discussion on the optimization of MySQL paging for billions of data