The title

Describe the Vue component lifecycle (if there are parent and child components)

How do Vue components communicate

Describes the process of component rendering and updating

knowledge

Props and $emit

• propsReceives information from the parent to the child (the parent passes values to the child via V-bind)
• vm.$emitTriggers an event for passing values between parent and child components and between components

Communication between components – Custom events

vm.$on( event, callback )

• Listen for custom events on the current instance. Events can be emitted by vm.$emit. The callback function receives any additional arguments that are passed in to the event that triggers the function.

vm.$off( [event, callback] )

• Remove custom event listeners.
• If no arguments are provided, all event listeners are removed;
• If only events are provided, remove all listeners for that event;
• If both an event and a callback are provided, only the listener for that callback is removed.

Typically defined in the beforeDestory life cycle

//index.vue
<template>
    <div>
        <Input @add="addHandler"/>
        <List :list="list" @delete="deleteHandler"/>
    </div>
</template>

<script>
import Input from './Input'
import List from './List'

export default {
    components: {
        Input,
        List
    },
    data() {
        return {
            list: []}},methods: {
        addHandler(title) {
            this.list.push({
                id: `id-The ${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item= >item.id ! == id) } } }</script>
Copy the code

// input.vue
<template>
    <div>
        <input type="text" v-model="title"/>
        <button @click="addTitle">add</button>
    </div>
</template>

<script>
import event from './event' // Call event.vue to pass values between components

export default {
    data() {
        return {
            title: ' '}},methods: {
        addTitle() {
            // Call the event of the parent component
            this.$emit('add'.this.title)

            // Call custom event components to pass values to trigger events
            event.$emit('onAddTitle'.this.title)

            this.title = ' '}}}</script>
Copy the code

//List.vue
<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.title}}
                <button @click="deleteItem(item.id)">delete</button>
            </li>
        </ul>
    </div>
</template>

<script>
import event from './event'

export default {
    // props: ['list']
    props: {
        // Prop type and default value
        list: {
            type: Array.default() {
                return[]}}},data() {
        return{}},methods: {
        deleteItem(id) {
            this.$emit('delete', id)
        },
        addTitleHandler(title) {
            // eslint-disable-next-line
            console.log('on add title', title)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('list mounted')

        // Bind custom events to receive events
        event.$on('onAddTitle'.this.addTitleHandler)
    },
    beforeDestroy() {
        // Destroy them in time, otherwise memory leaks may occur
        event.$off('onAddTitle'.this.addTitleHandler)
    }
}
</script>
Copy the code

//event is used to pass values between components
import Vue from 'vue'

export default new Vue()

Copy the code

Component life cycle

Component life cycle (single component)

beforcreate create beforeMount mounted beforeupdate updated beforedestroy destroy

Lifecycle (parent and child components)

Create:

• Initialize the parent component, then initialize the child component, then load the child component to finish, then load the parent component to finish

Destruction:

• Start destroying the parent, then start destroying the child, then destroy the child completes, then destroy the parent completes