vue 组件面试题

props和$emit

父子组件之间的通讯方式，父组件向子组件传值，通过在便签属性上用v-bing传值，子组件通过 props接收。
子组件向父组件传值，需要子组件在组件内通过$emit触发一个事件，触发时间时，携带事件名和参数，父组件通过在组件标签上监听事件来处理子组件传递过来的值。

<button @click="deleteItem(item.id)">删除</button>
 deleteItem(id) {
            this.$emit('delete', id) // 触发事件，并给时间上带参数
        },
<List :list="list" @delete="deleteHandler"/> // 这里监听事件的时候，函数名中不带参数
deleteHandler(id) { // 直接在监听事件函数接收参数即可
            this.list = this.list.filter(item => item.id !== id)
        }
//his.list.filter(item => item.id !== id) 删除元素

组件间通讯 – 自定义事件 和其他多种答案

组件间通讯的三个答案：

1. 父子组件之间通过props和emit触发事件来通讯
2. 兄弟组件之间通过自定义事件来通讯
3. 所有的组件之间的通讯都可以通过vuex来通讯。

自定义事件方式介绍如下

在一个组价中绑定一个时间 在mounted 方法中 绑定时间
都需要定义一个vue实例
绑定时间 用函数名字 方便解绑
在beforeDestory中解绑自定义的时间 event.$off()
$on $off $emit
event.js

import Vue from 'vue'
export default new Vue()

 // 调用自定义事件
            event.$emit('onAddTitle', this.title)

mounted() {
        // eslint-disable-next-line
        console.log('list mounted')

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

组件生命周期（必考）

创建前 和挂载前的区别：创建前只是在js中创建好了vue实例，但是还并没有开始在浏览器渲染 monted完了之后，说明页面的元素已经在浏览器渲染完了，可以操作浏览器的DOM元素了。