Detailed explanation of Vue's custom event content distribution

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

Recommend

Docker-compose installation yml file configuration method

Table of contents 1. Offline installation 2. Onli...

Display and hide HTML elements through display or visibility

Sometimes we need to control whether HTML elements...

Solution to the failure of MySQL service startup during MySQL 5.7.18 installation

MySQL is a very powerful relational database. How...

Detailed explanation of bash command usage

On Linux, bash is adopted as the standard, which ...

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

Table of contents background Effect Ideas backgro...

Several principles for website product design reference

The following analysis is about product design pr...

Vue3 Vue Event Handling Guide

Table of contents 1. Basic event handling 2. Send...

Implementing simple chat room dialogue based on websocket

This article shares the specific code for impleme...

Comparison of several examples of insertion efficiency in Mysql

Preface Recently, due to work needs, I need to in...

SQL implementation LeetCode (185. Top three highest salaries in the department)

[LeetCode] 185. Department Top Three Salaries The...

Detailed explanation of CSS elastic box flex-grow, flex-shrink, flex-basis

The functions of the three attributes flex-grow, ...

Vue multi-page configuration details

Table of contents 1. The difference between multi...

How to deploy your first application with Docker

In the previous article, you have installed Docke...

Use of MySQL official export tool mysqlpump

Table of contents Introduction Instructions Actua...

Installation and configuration method of Zabbix Agent on Linux platform

Here is a brief summary of the installation and c...