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

CSS3 transition rotation perspective 2d3d animation and other effects example code

Detailed explanation of Vue's custom event content distribution

Summarize

CSS3 transition rotation perspective 2d3d animation and other effects example code

Tutorial on how to modify element.style inline styles

Docker container orchestration implementation process analysis

10 minutes to thoroughly understand WeChat applet single page application routing

Eight rules for effective web forms

How to use node to implement static file caching

How to check if the firewall is turned off in Linux

mysql: [ERROR] unknown option '--skip-grant-tables'

How to install and configure Redis in CentOS7

CentOS 7.2 builds nginx web server to deploy uniapp project

Recommend

HTML Tutorial: title attribute and alt attribute

MySQL 5.6 decompressed version service cannot be started due to system error 1067

Summary of Linux sftp command usage

How to compile and install PHP and Nginx in Ubuntu environment

jQuery to achieve sliding stairs effect

A brief summary of all encapsulation methods in Vue

Detailed explanation of adding dotted lines to Vue element tree controls

Implementation of k8s deployment of docker container

JavaScript custom plug-in to implement tab switching function

Detailed explanation of the use of vue-resource interceptors

MySQL not null constraint case explanation

Detailed explanation of CSS sticky positioning position: sticky problem pit

What is em? Introduction and conversion method of em and px

Solution to ES memory overflow when starting docker

Solve the problem of resetting the Mysql root user account password