题目

描述Vue组件生命周期(有父子组件的情况)

Vue组件如何通讯

描述组件渲染和更新的过程

知识点

props 和 $emit

• props接收父组件向子组件传递的信息(父组件通过v-bind向子组件传值)
• vm.$emit触发一个事件，用于在父子组件以及组件之间传值

组件间通讯 - 自定义事件

vm.$on( event, callback )

• 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$off( [event, callback] )

• 移除自定义事件监听器。
• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器。

一般定义在beforeDestory生命周期中

//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-${Date.now()}`,
                title
            })
        },
        deleteHandler(id) {
            this.list = this.list.filter(item => item.id !== id)
        }
    }
}
</script>

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

<script>
import event from './event' //调用event.vue 用于组件间传值

export default {
    data() {
        return {
            title: ''
        }
    },
    methods: {
        addTitle() {
            // 调用父组件的事件 
            this.$emit('add', this.title)

            // 调用自定义事件 组件间传值 触发事件
            event.$emit('onAddTitle', this.title)

            this.title = ''
        }
    }
}
</script>

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

<script>
import event from './event'

export default {
    // props: ['list']
    props: {
        // prop 类型和默认值
        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')

        // 绑定自定义事件 接收事件
        event.$on('onAddTitle', this.addTitleHandler)
    },
    beforeDestroy() {
        // 及时销毁，否则可能造成内存泄露
        event.$off('onAddTitle', this.addTitleHandler)
    }
}
</script>

//event 用于组件间传值
import Vue from 'vue'

export default new Vue()

组件生命周期

组件生命周期(单个组件)

beforcreate create beforeMount mounted beforeupdate updated beforedestroy destroy

生命周期(父子组件)

创建：

• 先初始化父组件，然后初始化子组件，然后载入子组件完成，然后载入父组件完成

销毁：

• 先启动销毁父组件，然后启动销毁子组件，然后销毁子组件完成，然后销毁父组件完成