1、vue父子组件如何通信

1. 通过props和emit事件传递

// 父组件中<Child :data="data" @dataChange="dataChangeHandle"></Child>...methods: {dataChangeHandle(data) {...do somthing}
}
// 子组件中export default {props: {data: {type: Object,default: () => {}}},methods: {events() {this.$emit("dataChange", data)}}
}

2. 自定义事件

首先定义事件，只需要new一个vue实例即可
// event.js
const event = new Vue();export default event;//在事件定义处event.$emit("eventName", params);// 在事件接受处event.$on("eventName", this.eventHandle) // 为什么要使用function？

注意， 自定义事件必须要在组件销毁前解绑

3. vuex
   这条我想不必多赘述了

4. provide/inject

2、vue组件生命周期调用顺序

初始化(created)是从外到内的(即父组件到子组件)，而渲染(mounted)是从内到外的。

同理，update和destroy也是一样的。

3、v-model的实现原理

Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

4、$nextTick

什么是$nextTick？先如下代码会输出什么：

var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false

Vue 在更新 DOM 时是异步执行的。
只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
nextTick是更新完成的回调函数。
vue是异步渲染，$nextTick待DOM渲染完成再回调
页面渲染会将data的修改做整合，多次data修改只会渲染一次

5、slot

插槽包括普通插槽、具名插槽、作用域插槽

<navigation-link url="/profile">Your Profile
</navigation-link>

然后你在 的模板中可能会写为：

<av-bind:href="url"class="nav-link"
><slot></slot>
</a>

当组件渲染的时候， 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML

具名插槽：

<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>

使用：

<base-layout><template v-slot:header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><p>And another one.</p><template v-slot:footer><p>Here's some contact info</p></template>
</base-layout>

作用域插槽

<span><slot v-bind:user="user">{{ user.lastName }}</slot>
</span>

使用：

<current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</current-user>

6、动态、异步组件

什么是动态组件？有如下场景，需要渲染一个新闻页面，包括图片、文字等内容时，怎么渲染？当不确定渲染的是什么组件时，就需要用到动态组件了。

<template><div v-for="item in list" :key="item.type"><component :is="item.type"></component></div>
</template><script>
import component1 from './component1.vue'
import component2 from './component2.vue'export default {name: "AsyncComponent",components: {component1,component2},data() {return {list: [{name: '组件1',type: 'component1',},{name: '组件2',type: 'component2',}]}},
}
</script><style scoped></style>

如何使用异步组件？很简单，只需使用import函数即可，如：

components: {component1: () => import('./component1.vue'),component2: () => import('./component2.vue')},

7、keep-alive

<template><div><h1>keep-alive</h1><button @click="changeState('A')">A</button><button @click="changeState('B')">B</button><button @click="changeState('C')">C</button><KeepAlive><component :is="state"></component></KeepAlive></div>
</template><script>
import A from "./A.vue";
import B from "./B.vue";
import C from "./C.vue";export default {name: "KeepAlive",components: {A,B,C,},data() {return {state: "A",};},methods: {changeState(state) {this.state = state;},},
};
</script>

8、mixin

作用：抽离公共逻辑
定义mixin文件内容，写法与vue文件中script写法相同

var mixin = {created: function () { console.log(1) }
}
var vm = new Vue({created: function () { console.log(2) },mixins: [mixin]
})
// => 1
// => 2

mixin的缺点：

• 变量来源不明确，容易造成困惑
• 多minxin可能造成命名冲突
• 可能会出现多对多的关系，复杂度提升问题